/* sitio.css — estilos compartidos de las páginas públicas de tandazo.com.mx.
 *
 * Existe desde el 7-oct-2026: cada página trae su CSS adentro, así que un arreglo de
 * diseño tocaba las 701 páginas. Lo que se repite en todo el sitio vive aquí y se cambia
 * en un solo archivo. Se carga al final del <head>, después del CSS propio de la página,
 * para que gane cuando las dos reglas pesan igual.
 *
 * No va aquí: lo del cotizador (lead.js), el footer (footer.js) ni el banner de cookies
 * (cookies.js); cada uno trae sus estilos.
 */

/* ---- Fila "Sobre Tandazo": enlaces a las páginas de marca, al final de cada página.
 * Es estática para que la lean los buscadores y las IA que no corren JavaScript.
 * footer.js la quita cuando dibuja el footer, que ya trae esos mismos enlaces. */
.tz-marca{max-width:1100px;margin:40px auto 0;padding:18px 24px;border-top:1px solid rgba(255,238,210,.08);font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;color:#888;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.tz-marca b{color:#EDE5DB;font-weight:700}
.tz-marca a{color:#EDE5DB;text-decoration:none;border-bottom:1px solid rgba(255,238,210,.18)}
.tz-marca a:hover{color:#E05A2B;border-color:#E05A2B}
@media(max-width:640px){.tz-marca{padding:16px 16px;gap:8px 14px}}

/* ---- Tablas en celular: si no caben, se deslizan dentro de su caja y la página no se
 * mueve de lado (74 páginas se salían de la pantalla a 390 px, 7-oct-2026). */
/* lead.js envuelve cada tabla del contenido en .tz-tabla-scroll; la tabla guarda un ancho
 * minimo legible y se desliza dentro de su caja (como Tanda Casa). Sin JS, la regla de abajo
 * evita al menos que la pagina se mueva de lado. */
.tz-tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;scrollbar-color:#3A2F25 transparent}
@media(max-width:640px){
  .tz-tabla-scroll>table{min-width:540px;margin-top:0;margin-bottom:0}
  html:not(.tz-js) article table,html:not(.tz-js) table.data-table,html:not(.tz-js) table.tabla,html:not(.tz-js) table.esc-table{display:block;max-width:100%;overflow-x:auto}
}

/* ---- Barras de desplazamiento oscuras (el carrusel de recomendaciones mostraba una
 * barra blanca sobre el fondo espresso). */
.tz-rec-pista,table.data-table,table.tabla,table.esc-table{scrollbar-color:#3A2F25 transparent}
.tz-rec-pista::-webkit-scrollbar,table.data-table::-webkit-scrollbar{height:6px}
.tz-rec-pista::-webkit-scrollbar-thumb,table.data-table::-webkit-scrollbar-thumb{background:#3A2F25;border-radius:999px}
.tz-rec-pista::-webkit-scrollbar-track,table.data-table::-webkit-scrollbar-track{background:transparent}

/* ---- Boton "Ver mi plan" justo despues de la Respuesta corta (lo inserta lead.js). */
.tz-plan-cta{margin:-8px 0 32px;text-align:left}
.tz-plan-cta-b{display:inline-block;background:#CC4212;color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:16px;line-height:1.3;padding:14px 22px;border-radius:12px;text-decoration:none;transition:background .15s}
.tz-plan-cta-b:hover{background:#E05A2B}
/* las paginas pintan sus enlaces (p. ej. .article a{color:#E05A2B}); el boton va siempre en blanco */
.tz-plan-cta a.tz-plan-cta-b,.tz-plan-cta a.tz-plan-cta-b:visited,.tz-plan-cta a.tz-plan-cta-b:hover{color:#fff!important;text-decoration:none!important;border:0!important}
.tz-plan-cta-s{font-size:13px;color:#888;margin-top:8px;line-height:1.5}
@media(max-width:640px){.tz-plan-cta-b{display:block;text-align:center}}

/* ---- Calculadora tz-calc: deslizable (lead.js cambia #calc-monto a type=range). */
.tz-calc-cifra{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:30px;color:#fff;letter-spacing:-.5px;line-height:1.1;margin:2px 0 12px;font-variant-numeric:tabular-nums}
.tz-calc-wrap-range .tz-calc-prefix{display:none}
input.tz-calc-input.tz-calc-range{-webkit-appearance:none;appearance:none;width:100%;height:8px;padding:0;border:0;border-radius:999px;background:#2B2319;cursor:pointer;margin:14px 0 8px}
input.tz-calc-range:focus{outline:none}
input.tz-calc-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:4px solid #CC4212;box-shadow:0 2px 8px rgba(0,0,0,.4)}
input.tz-calc-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid #CC4212;box-shadow:0 2px 8px rgba(0,0,0,.4)}
input.tz-calc-range::-moz-range-track{background:transparent}

/* ---- Imagen principal del post (la pone .github/scripts/cablear_imagenes.py tras la
 * Respuesta corta; lead.js deja el boton "Ver mi plan" entre las dos). */
.tz-hero-img{margin:0 0 32px;padding:0}
.tz-hero-img img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:14px;border:1px solid rgba(255,238,210,.08);background:#1A1510}

/* ---- Enlaces dentro de la Respuesta corta: algunas paginas no les dan color y salian en
 * el azul del navegador sobre el fondo verde oscuro (ilegible, /prestamo-uber-didi/). */
.tldr a:not([class]){color:#F08A5D;text-decoration:underline;text-underline-offset:2px}

/* ---- Las paginas traen nav{position:fixed;top:0} para su cabecera, y eso pegaba arriba
 * cualquier otro <nav> (migas de pan en 12 posts, 118 px tapando la cabecera; antes la
 * fila Sobre Tandazo en 231). Los nav que no son la cabecera vuelven a su lugar. */
nav.crumbs,nav.ruta,nav.toc,nav.cat-nav,nav.az-nav{position:static!important;top:auto!important;left:auto!important;right:auto!important;z-index:auto!important;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom:0!important}

/* ---- En celular ningun hijo de una rejilla empuja la pagina de lado (herramientas). */
@media(max-width:640px){.grid>*{min-width:0}.grid{grid-template-columns:minmax(0,1fr)!important}}
@media(max-width:640px){
  /* filas de columnas fijas de los planificadores (remodelacion, negocio): se deslizan en su caja */
  :has(>.space-row),:has(>.space-headers),:has(>.extra-row){overflow-x:auto}
  /* lista con li en flex: cada <strong>/<em> se volvia una columna y empujaba la pagina */
  .evita-list li{display:block}
}

/* ---- Calculadora subida bajo la Respuesta corta (lead.js) */
.tz-calc.tz-calc-arriba{margin-top:8px;margin-bottom:36px}

/* ---- Preguntas frecuentes plegables (las arma lead.js) */
details.tz-faq{border:1px solid rgba(255,238,210,.10);border-radius:12px;background:#1A1510;margin:0 0 10px;padding:0 18px}
details.tz-faq>summary{cursor:pointer;list-style:none;padding:16px 28px 16px 0;position:relative;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:16px;line-height:1.35;color:#fff}
details.tz-faq>summary::-webkit-details-marker{display:none}
details.tz-faq>summary::after{content:'+';position:absolute;right:0;top:12px;font-size:22px;color:#E05A2B;font-weight:400}
details.tz-faq[open]>summary::after{content:'–'}
details.tz-faq>*:not(summary){margin-top:0}
details.tz-faq[open]{padding-bottom:6px}

/* ---- En celular, fuera la fila de pasos 1-2-3-4 de arriba: con las migas de pan empujaba
 * el titulo 100+ px y Tanda Casa no pone nada entre la cabecera y el titulo. */
@media(max-width:640px){nav.ruta{display:none!important}}
/* dentro del articulo, .article a{color:...} pintaba el boton de la calculadora del mismo naranja */
.tz-calc a.tz-calc-cta,.tz-calc a.tz-calc-cta:visited,.tz-calc a.tz-calc-cta:hover{color:#fff!important;text-decoration:none!important;border:0!important}

}

/* ---- Seccion Fuentes al final del post y fuente al pie de cada tabla (como Tanda Casa) */
.tz-fuentes{margin:40px 0 8px}
.tz-fuentes ul{margin:12px 0 0;padding-left:20px}
.tz-fuentes li{font-size:14px;line-height:1.6;color:#B9AFA4;margin:0 0 8px}
.tz-fuentes a{color:#F08A5D!important;text-decoration:underline;text-underline-offset:2px}
.tz-fuentes-n{font-size:13px;color:#888;margin:0}
.tz-tabla-fuente{font-size:12.5px;line-height:1.5;color:#888;margin:8px 0 24px;font-style:italic}
.tz-tabla-fuente a{color:#F08A5D!important;text-decoration:underline}

/* El logo va en minuscula (tandazo, zo terracota); 715 paginas lo traian como "Tanda<em>zo</em>" */
a.logo{text-transform:lowercase}

/* enlace de las paginas de casa/terreno (noindex) a la pagina de Tandazo que si aplica */
p[data-nota-inmueble] a{color:#F08A5D}