/* Constante · productos.css — piezas de la web por productos: la portada con las
   tarjetas de producto y las páginas de cada producto (/caja/, /balances/, /habla-con-tus-datos/, /gestorias/,
   /licitaciones/, /precios/). Se carga después de portada.css, con sus colores (tema.css) y sus fuentes. */

/* La fila de pestañas de producto de la barra está en barra.css */

.chip.nuevo{background:var(--tinta);color:var(--sobre-tinta)}
.crit{color:var(--rojo)} .warn{color:var(--ambar)} .ok{color:var(--verde)}
.muted{color:var(--tinta-2)}
.precio-hero{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.precio-hero .cifra{font-family:var(--f-titulo);font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.precio-hero .por{color:var(--tinta-2);font-size:15px}
.aviso-piloto{font-size:14px;color:var(--tinta-3)}

/* Portada: tarjetas de producto */
.productos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.producto{background:var(--hoja);border:1px solid var(--linea);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:12px;text-decoration:none;min-width:0;transition:border-color .2s,transform .15s}
@media (hover:hover){ .producto:hover{border-color:var(--tinta-3);transform:translateY(-2px)} }
.producto .cab{display:flex;justify-content:space-between;align-items:center;gap:10px}
.producto .ico{width:40px;height:40px;border-radius:10px;background:var(--verde-suave);color:var(--verde);display:grid;place-items:center}
.producto .ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.producto h3{font-size:23px;letter-spacing:-.02em}
.producto p{color:var(--tinta-2);font-size:15.5px}
.producto .precio{margin-top:auto;padding-top:12px;border-top:1px solid var(--linea-2);display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:14.5px}
.producto .precio b{font-family:var(--f-titulo);font-size:20px}
.producto .ver{color:var(--verde);font-weight:650;white-space:nowrap}

.rejilla{display:grid;gap:20px}
.rejilla.r2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rejilla.r3{grid-template-columns:repeat(3,minmax(0,1fr))}
.parte.destacada{border:2px solid var(--tinta)}
.lista-ok{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:15.5px}
.lista-ok li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px}
.lista-ok svg{width:14px;height:14px;margin-top:5px}
.lista-no .ok-trazo{stroke:var(--rojo)}
.pasos.p4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Tablas pequeñas dentro de tarjetas */
.tabla-wrap{overflow-x:auto}
.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th,.tabla td{padding:8px 10px;border-bottom:1px solid var(--linea-2);text-align:left}
.tabla td.c,.tabla th.c{text-align:right;font-family:var(--f-cifra);font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla th{font-size:12.5px;color:var(--tinta-3);font-weight:600}
.tabla tr.tot td{font-weight:700;border-bottom:2px solid var(--tinta)}
.tabla.ancha{min-width:460px}

/* Conversación de ejemplo (Habla con tus datos) */
.chat{display:flex;flex-direction:column;gap:12px}
.chat .burbuja{font-size:15px;line-height:1.5;padding:12px 15px}
.chat .fuente{display:block;margin-top:8px;font-size:12.5px;color:var(--tinta-3)}
.preguntas{display:flex;flex-wrap:wrap;gap:8px}
.pregunta{font:inherit;font-size:13.5px;font-weight:600;padding:7px 12px;border-radius:999px;border:1px dashed var(--linea);background:var(--hoja);color:var(--tinta);cursor:pointer;text-align:left}
.pregunta[aria-pressed="true"]{border-style:solid;border-color:var(--verde);background:var(--verde-suave)}

/* Análisis de balances */
.bloques{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bloque{background:var(--hoja);border:1px solid var(--linea);border-radius:var(--r-s);padding:16px;min-width:0;display:flex;flex-direction:column;gap:8px}
.bloque h3{font-family:var(--f-texto);font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:8px;letter-spacing:0}
.bloque h3 span{font-family:var(--f-cifra);font-variant-numeric:tabular-nums}
.cuenta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;font-size:14px}
.cuenta .campo{font-family:var(--f-cifra);font-variant-numeric:tabular-nums;font-size:13.5px;text-align:right;border:1px solid var(--linea);border-radius:6px;padding:5px 8px;background:var(--papel);min-width:96px}
.cuenta-mas{font-size:13.5px;font-weight:600;color:var(--verde);border:1px dashed var(--linea);border-radius:6px;padding:6px;text-align:center;margin-top:2px}
.cuadre{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14.5px;background:var(--verde-suave);color:var(--verde);border-radius:var(--r-s);padding:12px 16px;font-weight:600;margin-top:16px}
.cuadre svg{width:16px;height:16px;flex:none}
.ratios{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.grupo{background:var(--hoja);border:1px solid var(--linea);border-radius:var(--r-s);padding:16px;min-width:0}
.grupo h3{font-family:var(--f-texto);font-size:13px;font-weight:700;color:var(--tinta-3);margin-bottom:6px;letter-spacing:0}
.ratio{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:8px 0;border-top:1px solid var(--linea-2);font-size:14px}
.ratio .v{font-family:var(--f-cifra);font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.ratio .f{grid-column:1/-1;font-size:12.5px;color:var(--tinta-3)}
.modo{display:inline-flex;gap:4px;background:var(--hoja);border:1px solid var(--linea);border-radius:999px;padding:4px;flex-wrap:wrap;margin-bottom:18px}
.modo button{font:inherit;font-size:14px;font-weight:600;border:0;background:none;color:var(--tinta-2);padding:7px 14px;border-radius:999px;cursor:pointer}
.modo button[aria-pressed="true"]{background:var(--tinta);color:var(--sobre-tinta)}
.explica{display:grid;gap:12px}
.explica article{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;background:var(--hoja);border:1px solid var(--linea);border-radius:var(--r-s);padding:16px 18px}
.explica .sem{width:12px;height:12px;border-radius:50%;margin-top:7px;grid-row:span 2}
.sem.ok{background:var(--verde)} .sem.warn{background:var(--ambar)} .sem.crit{background:var(--rojo)}
.explica h3{font-size:18px}
.explica p{color:var(--tinta-2);font-size:15.5px}
.explica [data-texto="tecnico"]{display:none}
.explica.tecnico [data-texto="sencillo"]{display:none}
.explica.tecnico [data-texto="tecnico"]{display:block}
.informes{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:24px;align-items:start}
.opciones-inf{display:flex;flex-direction:column;gap:10px}
.op-inf{font:inherit;color:inherit;text-align:left;cursor:pointer;background:var(--hoja);border:1px solid var(--linea);border-radius:var(--r-s);padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.op-inf[aria-pressed="true"]{border-color:var(--tinta);box-shadow:inset 0 0 0 1px var(--tinta)}
.op-inf b{font-size:16px}
.op-inf span{font-size:14px;color:var(--tinta-2)}
.a4{background:var(--hoja);border:1px solid var(--linea);border-radius:6px;box-shadow:var(--sombra);padding:clamp(18px,3vw,32px);display:flex;flex-direction:column;gap:14px;min-width:0}
.a4[hidden]{display:none}
.a4 .cab-a4{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--tinta-3);border-bottom:1px solid var(--linea-2);padding-bottom:10px;flex-wrap:wrap}
.a4 h3{font-size:24px}
.a4 h4{font-size:16px;font-family:var(--f-titulo)}
.a4 .kpis-a4{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.a4 .kpis-a4 div{background:var(--papel);border-radius:6px;padding:10px 12px;display:flex;flex-direction:column;min-width:0}
.a4 .kpis-a4 .l{font-size:12px;color:var(--tinta-3);font-weight:600}
.a4 .kpis-a4 .v{font-family:var(--f-cifra);font-weight:600;font-size:17px;font-variant-numeric:tabular-nums}
.a4 ol{margin:0;padding-left:20px;font-size:14.5px;display:flex;flex-direction:column;gap:6px;color:var(--tinta-2)}
.a4 .enfasis{font-size:13px;color:var(--tinta-3)}

/* Gestorías: calcular el precio */
.selector{display:flex;flex-direction:column;gap:14px;background:var(--hoja);border:1px solid var(--linea);border-radius:var(--r);padding:24px;min-width:0}
.selector input[type=range]{width:100%;accent-color:var(--verde)}
.selector .res{font-family:var(--f-titulo);font-size:40px;font-weight:800;letter-spacing:-.02em;line-height:1}

/* Precios */
.cabeza-precios{padding-block:clamp(32px,5vw,64px) 0;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.cabeza-precios h1{font-size:clamp(40px,5vw,68px);line-height:1;letter-spacing:-.03em;font-weight:800}
.cabeza-precios p{font-size:19px;max-width:58ch;color:var(--tinta-2)}
.periodo{display:inline-flex;gap:4px;background:var(--hoja);border:1px solid var(--linea);border-radius:999px;padding:4px;flex-wrap:wrap}
.periodo button{font:inherit;font-size:14.5px;font-weight:600;border:0;background:none;color:var(--tinta-2);padding:8px 16px;border-radius:999px;cursor:pointer}
.periodo button[aria-pressed="true"]{background:var(--tinta);color:var(--sobre-tinta)}
.interruptores{display:flex;gap:10px;flex-wrap:wrap}
.nota-ia{font-size:15px!important;max-width:62ch}
.nota-ia b{color:var(--tinta)}
.planes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;margin-top:28px}
.planes [hidden]{display:none!important}
.plan{background:var(--hoja);border:1px solid var(--linea);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:14px;min-width:0;position:relative}
.plan.dest{border:2px solid var(--tinta);box-shadow:var(--sombra)}
.plan .sello{position:absolute;top:-12px;left:22px}
.plan h2{font-size:22px;letter-spacing:-.015em}
.plan .p{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.plan .p b{font-family:var(--f-titulo);font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1}
.plan .p span{font-size:14px;color:var(--tinta-2)}
.plan .ahorro{font-size:13px;font-weight:600;color:var(--verde);min-height:20px}
.plan .desc{font-size:14.5px;color:var(--tinta-2)}
.plan .lista-ok{font-size:14.5px}
.plan .btn{margin-top:auto;justify-content:center;text-align:center}
.plan .ia-tarjeta{margin-top:auto;display:flex;width:100%;flex-wrap:nowrap;background:var(--papel)}
.plan .ia-tarjeta button{flex:1 1 0;padding:8px 8px;font-size:13.5px;line-height:1.25}
.plan .ia-tarjeta ~ .btn{margin-top:0}
.extra{font-size:13.5px;color:var(--tinta-2);background:var(--papel);border-radius:8px;padding:9px 11px}
.extra b{color:var(--tinta)}
.sueltos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.suelto{background:var(--hoja);border:1px solid var(--linea);border-radius:var(--r-s);padding:18px;display:flex;flex-direction:column;gap:6px;min-width:0}
.suelto .p{font-family:var(--f-titulo);font-size:24px;font-weight:800}
.suelto .p small{font-family:var(--f-texto);font-size:14px;font-weight:500;color:var(--tinta-2)}
.suelto p{font-size:14.5px;color:var(--tinta-2)}
.sueltos.cuatro{grid-template-columns:repeat(4,minmax(0,1fr))}
.suelto > a{margin-top:auto;font-size:14.5px;font-weight:600;color:var(--tinta)}
.comparar-wrap{overflow-x:auto;background:var(--hoja);border:1px solid var(--linea);border-radius:var(--r)}
.comparar{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px}
.comparar th,.comparar td{padding:11px 14px;border-bottom:1px solid var(--linea-2);text-align:center}
.comparar th:first-child,.comparar td:first-child{text-align:left}
.comparar thead th{font-family:var(--f-titulo);font-size:16px}
.comparar .si{color:var(--verde);font-weight:700}
.comparar .no{color:var(--tinta-3)}
.faq{display:flex;flex-direction:column;border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea);padding:16px 0}
.faq summary{cursor:pointer;font-weight:650;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-cifra);color:var(--tinta-3)}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--tinta-2);font-size:15.5px;margin-top:10px;max-width:70ch}

/* Licitaciones: solo consulta */
.consulta{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(40px,7vw,96px) 0}
.consulta h1{font-size:clamp(42px,5.6vw,76px);line-height:1;letter-spacing:-.03em;font-weight:800}
.consulta .texto{display:flex;flex-direction:column;gap:22px;min-width:0}
.consulta .entradilla{font-size:clamp(18px,1.6vw,20px);line-height:1.55;color:var(--tinta-2);max-width:40ch}

@media (max-width:1180px){
  .sueltos.cuatro{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .productos,.rejilla.r3,.bloques,.sueltos,.ratios,.pasos.p4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .planes{grid-template-columns:minmax(0,1fr);max-width:560px}
  .informes,.consulta{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:680px){
  .productos,.rejilla.r2,.rejilla.r3,.bloques,.sueltos,.sueltos.cuatro,.ratios,.planes,.pasos.p4{grid-template-columns:minmax(0,1fr)}
  .a4 .kpis-a4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plan .sello{left:16px}
  .interruptores{width:100%}
  .interruptores .periodo{display:flex;width:100%;flex-wrap:nowrap}
  .interruptores .periodo button{flex:1 1 0;padding:8px 8px;font-size:13.5px;line-height:1.25}
}

/* Portada: el título es más largo que el de Mi caja y va un punto más pequeño para quedarse en tres o cuatro líneas */
.hero h1.h1-portada{font-size:clamp(42px,5.2vw,70px);line-height:1.02}