/* =====================================================================
   Japón Solar · Versión 8 · Ajustes sobre el diseño de la versión 6
   Arregla lo que se veía mal en el celular: tablas, recuadros, puntos
   clave, imágenes de producto y contraste. No cambia la paleta.
   ===================================================================== */

/* ---------- Puntos clave: el primero ya no grita ---------- */
html.v10 .art-resumen .art-resumen-tit{display:block;color:var(--navy);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
html.v10 .art-resumen li strong,html.v10 .art-resumen li b{text-transform:none!important;letter-spacing:0!important;font-size:inherit!important;color:var(--tinta)!important}
html.v10 .art-resumen li{margin:10px 0;line-height:1.5}

/* ---------- Recuadros: dos formas, no siete ---------- */
html.v10 .art-nota{background:var(--arena);border:0;border-radius:var(--radio-s);padding:18px 20px;font-size:17px;line-height:1.6}
html.v10 .art-nota strong{color:var(--tinta)}
html.v10 .art-alerta{background:var(--sol-suave);border:0}
html.v10 .inv-destacado{background:var(--arena);border:0}
html.v10 .inv-caja{background:#fff;border:1px solid var(--linea);border-radius:var(--radio-s);box-shadow:none}

/* ---------- Tablas que se vuelven fichas en el celular ---------- */
@media (max-width:640px){
  html.v10 table.apilar{display:block;width:100%;margin:18px 0;border:0!important;box-shadow:none!important;background:none!important}
  html.v10 table.apilar thead{display:none}
  html.v10 table.apilar tbody{display:block}
  html.v10 table.apilar tr{display:block;padding:14px 0 12px;border-bottom:1px solid var(--linea);background:none!important}
  html.v10 table.apilar tr:first-child{border-top:2px solid var(--navy)}
  html.v10 table.apilar td,html.v10 table.apilar th{display:block;position:relative;padding:4px 0 4px 42%;min-height:1.4em;border:0!important;text-align:left;font-size:15.5px;background:none!important;white-space:normal!important}
  html.v10 table.apilar td::before,html.v10 table.apilar th::before{content:attr(data-label);position:absolute;left:0;top:5px;width:38%;font-size:13px;font-weight:600;color:var(--gris);line-height:1.35}
  html.v10 table.apilar tr > :first-child{display:block;padding-left:0;font-size:17px;font-weight:700;color:var(--navy);margin-bottom:6px}
  html.v10 table.apilar tr > :first-child::before{display:none}
  html.v10 .inv-tabla-wrap:has(table.apilar),html.v10 .tar-tabla-wrap:has(table.apilar){overflow:visible;border:0;box-shadow:none}
  /* la columna resaltada de la guía de bifaciales, ya sin fondo de columna */
  html.v10 .art-cuerpo table.apilar.bif-tabla td.bif-esperar{background:none;border:0;color:var(--sol);font-weight:800}
}

/* ---------- Nosotros: cómo trabajamos, legible en el celular ---------- */
html.v10 .nos-valores{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:860px){html.v10 .nos-valores{grid-template-columns:1fr 1fr}}
@media (max-width:560px){html.v10 .nos-valores{grid-template-columns:1fr}}
html.v10 .nos-valores > div{background:var(--arena);border-radius:var(--radio-s);padding:18px 20px}
html.v10 .nos-valores h3{font-size:17px;margin:0 0 6px}
html.v10 .nos-valores p{margin:0;font-size:16px;color:var(--gris)}
html.v10 p.lead{font-size:clamp(19px,2.2vw,23px);line-height:1.45;color:var(--tinta);font-family:var(--display);font-weight:600;max-width:34ch}

/* ---------- Trabaja con nosotros ---------- */
html.v10 .garantias-grid .garantia ul{margin:10px 0 0;padding-left:20px}
html.v10 .garantias-grid .garantia li{font-size:15.5px;color:var(--gris);margin:4px 0}

/* ---------- La tarjeta de cierre del inicio, legible ---------- */
html.v10 .cierre-texto p,html.v10 .cierre-texto strong{color:#fff;text-shadow:0 1px 16px rgba(26,25,23,.55)}

/* ---------- Menos subrayado naranja compitiendo con el texto ---------- */
html.v10 .art-cuerpo p > a,html.v10 .art-cuerpo li > a{border-bottom:0;box-shadow:inset 0 -1px 0 rgba(180,83,42,.55);text-decoration:none;color:var(--navy);font-weight:600}
html.v10 .art-cuerpo p > a:hover,html.v10 .art-cuerpo li > a:hover{box-shadow:inset 0 -2px 0 var(--sol)}

/* ---------- Diagrama de la cadena (guía de micro contra central) ----------
   Enseña por qué un panel con sombra frena a los demás cuando van en serie.
   El flujo se mueve con JavaScript, igual que el diagrama de la portada,
   porque la animación por CSS se detenía en Safari al ocultar y mostrar los
   trazos y con "reducir movimiento" activado. */
html.v10 .cad-wrap{background:var(--arena);border:1px solid var(--linea);border-radius:var(--radio);
  padding:22px 22px 18px;margin:26px 0}
html.v10 .cad-tit{font-weight:700;color:var(--tinta);font-size:16px;margin:0 0 12px}
html.v10 .cad-toggle{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
html.v10 .cad-toggle button{font:inherit;font-size:14px;font-weight:600;padding:9px 14px;border-radius:999px;
  border:1px solid var(--linea);background:var(--papel);color:var(--gris);cursor:pointer}
html.v10 .cad-toggle button[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:#fff}
html.v10 .cad-toggle button:focus-visible{outline:2px solid var(--sol);outline-offset:2px}
html.v10 .cad-svg{width:100%;height:auto;display:block;background:var(--papel);border-radius:var(--radio-s)}
html.v10 .cad-hilo{fill:none;stroke:var(--linea);stroke-width:5;stroke-linecap:round}
html.v10 .cad-flujo{fill:none;stroke:var(--sol);stroke-width:5;stroke-linecap:round;stroke-dasharray:2 16}
html.v10 .cad-pct{font:700 15px var(--sans,inherit);fill:var(--tinta)}
html.v10 .cad-pie{font:600 15px var(--sans,inherit);fill:var(--gris)}
html.v10 .cad-micro{fill:var(--sol-suave);stroke:var(--sol);stroke-width:1.5}
html.v10 .cad-micro-t{font:600 11px var(--sans,inherit);fill:var(--tinta)}
html.v10 .cad-nota{margin:12px 0 0;font-size:16px;line-height:1.55}
/* se enciende un modo u otro */
html.v10 .cad-wrap[data-modo="cadena"] .cad-micros,
html.v10 .cad-wrap[data-modo="micros"] .cad-cadena{display:none}
@media (max-width:620px){
  html.v10 .cad-wrap{padding:16px 14px 14px}
  html.v10 .cad-toggle button{font-size:13px;padding:8px 11px;flex:1 1 auto}
  html.v10 .cad-pct{font-size:19px}
  html.v10 .cad-pie{font-size:18px}
  html.v10 .cad-micro-t{font-size:14px}
}

/* ---------- Caso trabajado: un ejemplo con sus tablas, en su propia tarjeta ----------
   Nace de la guía de cuántos paneles, donde el ejemplo de las dos casas creció
   a dos tablas y cuatro párrafos. Como recuadro (.art-nota) medía 6,340 px en
   celular; suelto en el cuerpo, el lector no sabía dónde empieza ni dónde acaba.
   Lleva fondo de arena, no de papel, porque en la versión 10 el papel es el
   mismo color de la página y la tarjeta se volvía invisible. Y lleva !important
   en el renglón marcado porque v10.css apaga los fondos de tabla con !important.
   Todo con variables: v10.py lo recolorea sin tocar nada. */
html.v10 .art-caso{
  background:var(--arena);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:26px 28px 22px;
  margin:28px 0;
}
html.v10 .art-caso-rotulo{
  display:block;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--sol);
  margin-bottom:14px;
}
html.v10 .art-caso > h3{margin:22px 0 8px;font-size:19px}
html.v10 .art-caso > h3:first-of-type{margin-top:0}
html.v10 .art-caso > p{margin:0 0 12px}
html.v10 .art-caso > p:last-child{margin-bottom:0}
/* las tablas de adentro van sobre papel, para que se despeguen del arena de la
   tarjeta sin convertirse en una tarjeta dentro de otra */
html.v10 .art-caso .art-tabla{
  margin:12px 0 18px;
  border:0!important;
  box-shadow:none!important;
  border-radius:var(--radio-s);
  overflow:hidden;
  background:var(--papel)!important;
  font-size:16px;
}
html.v10 .art-caso .art-tabla thead th{
  background:var(--papel)!important;
  color:var(--gris)!important;
  border-bottom:1px solid var(--linea)!important;
  font-size:13px;
  letter-spacing:0;
  text-transform:none;
}
html.v10 .art-caso table.art-tabla tbody tr > *,
html.v10 .art-cuerpo .art-caso table.art-tabla tbody tr > *{background:var(--papel)!important}
html.v10 .art-caso .art-tabla tbody tr:last-child > *{border-bottom:0!important}
/* el renglón que importa: el que ya rebasó el límite */
html.v10 .art-cuerpo .art-caso table.art-tabla tbody tr.caso-ojo > *,
html.v10 .art-caso tr.caso-ojo > *{background:var(--sol-suave)!important}
html.v10 .art-cuerpo .art-caso table.art-tabla tbody tr.caso-ojo > :first-child,
html.v10 .art-caso tr.caso-ojo > :first-child{box-shadow:inset 3px 0 0 var(--sol)!important}
html.v10 .art-caso .art-fuente{margin-top:16px!important;margin-bottom:0}
@media (max-width:760px){
  html.v10 .art-caso{padding:20px 18px 18px;border-radius:var(--radio-s)}
  /* apilada, cada casa es su propio bloque de papel sobre el arena */
  html.v10 .art-caso table.apilar{background:none!important}
  html.v10 .art-caso table.apilar tr{display:block;padding:14px 16px 12px;border-bottom:0!important;border-top:0!important;background:var(--papel)!important;border-radius:var(--radio-s);margin-bottom:10px}
  html.v10 .art-caso table.apilar tr > *{background:none!important}
  html.v10 .art-caso table.apilar tr.caso-ojo{background:var(--sol-suave)!important;box-shadow:inset 3px 0 0 var(--sol)}
  html.v10 .art-caso table.apilar tr.caso-ojo > :first-child{box-shadow:none!important}
  html.v10 .art-caso table.apilar td{padding-left:44%}
  html.v10 .art-caso table.apilar td::before{width:40%}
}

/* ---------- Ventanas de las guías: respiro entre bloques ---------- */
html.v10 .incl-texto h3{margin-top:22px}
html.v10 .incl-texto h3:first-child{margin-top:0}
html.v10 .incl-texto .art-tabla{font-size:15px}
/* El contenido de las ventanas no vive dentro de .art-cuerpo, así que sus
   párrafos nunca heredaron el "margin:0 0 14px" de ahí: salían pegados uno al
   siguiente. Y .art-fuente solo fija margin-top, de modo que el párrafo que
   venía después de la letra chica la tocaba sin ningún respiro. */
html.v10 .incl-texto p{margin:0 0 14px}
html.v10 .incl-texto .art-fuente{margin-bottom:16px}
html.v10 .incl-texto > :last-child{margin-bottom:0}
/* Corrección de itálica. El título de una obra va en cursiva, y la última letra
   se inclina sobre el espacio que sigue: "Solar Compass (2023)" se leía pegado.
   El espacio sí estaba, medía 3.89 px; lo que faltaba era aire para el remate
   de la cursiva. Vale igual antes del punto, que es el otro caso del sitio. */
html.v10 cite{padding-right:.09em}

/* ---------- Las dos lecturas, en el celular ---------- */
@media (max-width:640px){
  html.v10 .inv-selector{grid-template-columns:1fr}
  html.v10 .inv-compara{grid-template-columns:1fr}
}

/* la tabla de bifaciales ya no obliga a deslizar: se apila como las demás */
@media (max-width:640px){
  html.v10 .art-cuerpo table.apilar.bif-tabla{min-width:0!important}
  html.v10 .art-cuerpo table.apilar.bif-tabla th.bif-esperar,html.v10 .art-cuerpo table.apilar.bif-tabla td.bif-esperar{border:0!important}
}

/* Vacantes: en el celular van una abajo de otra, no en tres columnas */
@media (max-width:860px){html.v10 .garantias-grid{grid-template-columns:1fr}}
html.v10 .garantias-grid .garantia{text-align:left}
html.v10 .art-resumen li{text-wrap:pretty}

/* las tablas anchas tampoco obligan a deslizar en el celular */
@media (max-width:640px){
  html.v10 .art-cuerpo table.apilar.inv-ancha{min-width:0!important}
  html.v10 .inv-tabla-wrap{overflow:visible}
}

/* Las dos lecturas: sin JavaScript se muestran ambas y se ocultan los controles
   que no funcionarían, para que nadie vea "vea la explicación sencilla"
   estando ya en la sencilla. */
html.sin-js .inv-version[hidden]{display:block}
html.sin-js .inv-elige,
html.sin-js .inv-cambiar{display:none}

/* ---------- Palabras resaltadas: se escriben ==así== en el texto ----------
   Sirve para que en un enlace largo salten las dos o tres palabras que
   dan la razón para dar clic, sin gritar con mayúsculas. */
mark.marca{
  background:#F5E2D6;
  color:#1D1C1A;
  font-weight:800;
  border-radius:3px;
  padding:.04em .3em;
  margin:0 -.06em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.boton-enlace:hover mark.marca,.enlace-guia a:hover mark.marca{background:var(--naranja);color:#fff}
@media (prefers-contrast:more){mark.marca{outline:1px solid currentColor}}

/* ---------- Caso documentado: los dos recibos de CFE ----------
   Van en chico, uno al lado del otro, y se amplían al tocarlos. */
.rec-par{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,3vw,30px);margin:30px 0 34px}
.rec-tarjeta{margin:0;display:flex;flex-direction:column;gap:12px}
.rec-zoom{
  display:block;position:relative;padding:0;border:1px solid var(--linea);border-radius:10px;
  background:#fff;cursor:zoom-in;overflow:hidden;line-height:0;
  box-shadow:0 1px 2px rgba(26,25,23,.05),0 10px 26px -18px rgba(26,25,23,.35);
  transition:transform .18s ease,box-shadow .18s ease;
}
.rec-zoom img{width:100%;height:auto;display:block}
.rec-zoom:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(26,25,23,.07),0 18px 36px -20px rgba(26,25,23,.45)}
.rec-zoom:focus-visible{outline:2px solid var(--naranja);outline-offset:3px}
.rec-lupa{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  font-family:var(--display,inherit);font-size:13px;font-weight:700;line-height:1;
  color:#fff;background:rgba(26,25,23,.86);border-radius:999px;padding:8px 14px;
  opacity:0;transition:opacity .18s ease;pointer-events:none;
}
.rec-zoom:hover .rec-lupa,.rec-zoom:focus-visible .rec-lupa{opacity:1}
@media (hover:none){.rec-lupa{opacity:1}}

.rec-tarjeta figcaption{display:flex;flex-direction:column;gap:3px}
.rec-etq{font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--gris,#6A6660)}
.rec-monto{font-size:clamp(28px,4.6vw,40px);line-height:1.05;color:var(--navy)}
.rec-meta{font-size:14px;color:var(--gris,#6A6660);line-height:1.4}
.rec-historia{max-width:62ch}
.rec-historia p{margin:0 0 1em}

/* La ventana donde se ve el recibo en grande */
.rec-visor{
  border:0;padding:0;background:transparent;max-width:min(96vw,920px);max-height:94vh;
  /* inset:0 + margin:auto lo centra; el reset global del sitio pone margin:0
     y lo dejaba pegado a la esquina de arriba a la izquierda */
  inset:0;margin:auto;
  overflow:visible;
}
.rec-visor::backdrop{background:rgba(8,14,26,.94)}
.rec-visor img{display:block;width:100%;height:auto;max-height:calc(94vh - 46px);object-fit:contain;
  border-radius:8px;background:#fff}
.rec-cerrar{
  position:absolute;top:-14px;right:-14px;z-index:2;
  width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:#fff;color:var(--navy);font:700 24px/1 system-ui;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.rec-cerrar:focus-visible{outline:2px solid var(--naranja);outline-offset:2px}

/* el aviso de deslizar solo aparece en celular; la regla va antes del media
   query, porque si va después lo apaga también ahí */
.rec-desliza{display:none;margin:-10px 0 16px;font-size:13.5px;color:var(--gris,#6A6660)}

/* ---------- En celular: se deslizan de lado y se recortan por arriba ----------
   Apilados, los dos recibos ocupaban 956 px y la imagen completa se encogía a
   356 px de ancho: a ese tamaño no se lee una sola cifra del recibo, así que
   media pantalla se iba en una mancha gris. Ahora la tarjeta muestra solo la
   franja de arriba, que es donde están el logo de CFE y el TOTAL A PAGAR, y
   esos sí se leen. El recibo completo sigue a un toque de distancia. */
@media (max-width:620px){
  .rec-par{
    display:flex;
    grid-template-columns:none;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    margin:24px calc(var(--gutter,20px) * -1) 26px;
    padding:4px var(--gutter,20px) 10px;
    scroll-padding-left:var(--gutter,20px);
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .rec-par::-webkit-scrollbar{display:none}
  .rec-par > .rec-tarjeta{flex:0 0 84%;scroll-snap-align:start;min-width:0;gap:10px}
  /* solo la franja de arriba del recibo, que es la que se puede leer */
  .rec-zoom img{aspect-ratio:16/7;object-fit:cover;object-position:top center}
  /* a la esquina: centrada tapaba justo el TOTAL A PAGAR */
  .rec-lupa{opacity:1;left:auto;right:8px;bottom:8px;transform:none;font-size:11.5px;padding:6px 10px}
  .rec-etq{font-size:11.5px}
  .rec-monto{font-size:34px}
  .rec-meta{font-size:13px}
  .rec-cerrar{top:6px;right:6px}
  /* En celular el visor ocupa toda la pantalla y el recibo entra completo, lo
     más grande que quepa. Quien quiera leer el detalle hace pellizco: el
     viewport del sitio no bloquea el zoom. Antes lo abría a 920 px y había que
     arrastrarlo, que se veía peor. */
  /* El [open] es obligatorio: display:flex viene de la hoja del autor y le gana
     a la regla del navegador dialog:not([open]){display:none} sin importar la
     especificidad, porque el origen del autor manda sobre el del navegador. Sin
     él, el visor se quedaba desplegado encima de toda la guía en celular. */
  .rec-visor[open]{
    background:rgba(8,14,26,.94);
    width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;
    margin:0;padding:0;border-radius:0;
    display:flex;flex-direction:column;justify-content:center;
    overflow:visible;
  }
  .rec-visor img{
    width:auto;height:auto;
    max-width:100vw;max-height:calc(100dvh - 64px);
    margin:0 auto;border-radius:0;
  }
  .rec-pie{
    position:absolute;left:0;right:0;bottom:0;margin:0;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(8,14,26,.92);font-size:13px;
  }
  .rec-desliza{display:block}
}

.rec-pie{margin:10px 2px 0;font-size:13.5px;line-height:1.4;color:#EDEAE4;text-align:center}
.rec-pie a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.rec-pie .solo-tacto{display:none}
@media (hover:none){.rec-pie .solo-tacto{display:inline}.rec-pie .solo-raton{display:none}}

/* ---------- Cita textual de un documento (condiciones generales, normas) ----------
   Se marca con una barra lateral para que se vea que son palabras de otro,
   no nuestras. */
.art-cita{
  margin:1.6em 0;padding:2px 0 2px 20px;
  border-left:3px solid var(--naranja);
}
.art-cita p{margin:0;font-size:1.02em;line-height:1.55;color:var(--navy)}
@media (max-width:640px){.art-cita{padding-left:15px}}

/* ---------- Respuesta corta al inicio de una guía ----------
   Pensada para que se sostenga sola: si alguien la cita suelta, trae
   la respuesta, la fecha y la fuente. */
.art-respuesta{
  margin:0 0 34px;padding:22px 24px;
  background:var(--arena,#F3F0EA);border-radius:var(--radio-s,12px);
  border-left:4px solid var(--naranja);
}
.art-respuesta-q{
  margin:0 0 10px;font-family:var(--display,inherit);font-weight:700;
  font-size:1.06em;line-height:1.3;color:var(--navy);
}
.art-respuesta p{margin:0 0 .8em}
.art-respuesta p:last-child{margin-bottom:0}
.art-respuesta-f{font-size:.87em;line-height:1.45;color:var(--gris,#6A6660)}
@media (max-width:640px){.art-respuesta{padding:18px 16px}}

/* ---------- Cómo citar esta página ----------
   Discreto: va al final, no compite con el cierre de la guía. */
.art-citar{
  margin:44px 0 0;padding-top:20px;
  border-top:1px solid var(--linea);
  font-size:.92em;color:var(--gris,#6A6660);
}
.art-citar-tit{
  display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gris,#6A6660);margin-bottom:10px;
}
.art-citar-ref{margin:0 0 .7em;color:var(--navy);line-height:1.5}
.art-citar-ref cite{font-style:italic}
.art-citar-url{font-size:.93em;color:var(--gris,#6A6660);word-break:break-all}
.art-citar-nota{margin:0;line-height:1.5}