/* ===================================================================== Japón Solar · Versión 10 · "Papel y piedra" (la versión 7 con los cambios de la 8) Idea: una revista bien impresa, no un folleto. Fondo de papel cálido, tinta casi negra, un solo color de acento (terracota, el ladrillo y la teja de Monterrey al atardecer) y verde solo para el ahorro. Títulos con serifa (Source Serif 4) para dar voz; texto con la letra del propio teléfono (San Francisco en iPhone, Roboto en Android): es la más cómoda de leer en pantalla y no hay que descargarla. Menos cajas, más aire: la jerarquía la dan el tamaño y el espacio. Escala de tamaños: 13 · 14 · 16 · 18 · 21 · 25 · 30 · 36 · 44 · 56. Pesos: 400, 600 y 700 y nada más. Los pesos intermedios (550, 650) sólo existen en la letra de Apple; en Roboto y en Segoe UI el navegador los redondea a 700, así que la jerarquía que se ve en una Mac se aplasta en el celular del cliente. Con tres pesos se ve igual en todos lados. ===================================================================== */ /* Source Serif 4 Subhead Semibold, recortada al alfabeto español. Tamaño óptico "Subhead": dibujada para 24-36 pt, que es donde viven casi todos los títulos del sitio. Se quitó la ligadura "fi" a propósito: así la i conserva su punto en financiamiento, eficiencia, oficina y beneficio. El .woff es el respaldo para navegadores viejos. Licencia OFL. */ @font-face{font-family:"Source Serif 4"; src:url(/fonts/source-serif-600.woff2) format("woff2"), url(/fonts/source-serif-600.woff) format("woff"); font-weight:600;font-style:normal;font-display:swap} html.v10{ --papel:#FBFAF7; --piedra:#F3F0EA; --piedra-2:#E9E4DB; --tinta:#1A1917; --tinta-2:#2A2825; --navy:#1D1C1A; --oscuro:#1A1917; --texto:#2E2C29; --gris:#6A6660; --linea:#E5E1D9; --acento:#A84B25; --acento-claro:#E8A585; --acento-suave:#F7E7DD; --sol:#A84B25; --naranja:#A84B25; --sol-suave:#F7E7DD; --arena:#F3F0EA; --arena-2:#E9E4DB; --crema:#F3F0EA; --ahorro:#2C7A55; --verde:#2C7A55; --radio:18px; --radio-s:12px; --sombra:0 1px 1px rgba(26,25,23,.03),0 8px 24px -14px rgba(26,25,23,.18); --sombra-alta:0 1px 2px rgba(26,25,23,.04),0 18px 40px -22px rgba(26,25,23,.30); --serif:"Source Serif 4",Georgia,"Times New Roman",serif; --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; background:var(--papel); } html.v10 body{font-family:var(--sans);font-size:18px;line-height:1.62;color:var(--texto);background:var(--papel); font-feature-settings:"kern","liga";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;hanging-punctuation:first} html.v10 .linea-marca{display:none} html.v10 .maqueta-aviso{background:var(--tinta);color:#EDEAE4;font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.01em;padding:7px 12px} /* ---------- Tipografía ---------- */ html.v10 h1,html.v10 h2{font-family:var(--serif);font-weight:600;letter-spacing:-.012em;color:var(--tinta);text-wrap:balance} html.v10 h1{line-height:1.06} html.v10 h2{font-size:clamp(30px,3.6vw,44px);line-height:1.1;margin-bottom:.45em} html.v10 h3,html.v10 h4{font-family:var(--sans);font-weight:700;letter-spacing:-.01em;color:var(--tinta);line-height:1.3;text-wrap:balance} html.v10 p,html.v10 li{text-wrap:pretty} html.v10 strong,html.v10 b{font-weight:700;color:inherit} html.v10 .intro,html.v10 .art-desc{color:#56534E;font-size:clamp(18px,1.7vw,21px);line-height:1.55} html.v10 .eyebrow{display:block;font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--acento);margin-bottom:10px} html.v10 .eyebrow::before{display:none} html.v10 .seccion#dac .eyebrow,html.v10 .hero .eyebrow,html.v10 .contacto .eyebrow,html.v10 .dest-texto .eyebrow{color:var(--acento-claro)!important} html.v10 a{color:var(--acento);text-decoration-thickness:1px;text-underline-offset:3px} html.v10 .num,html.v10 td,html.v10 .cifra,html.v10 .tar-tabla{font-variant-numeric:tabular-nums lining-nums} /* Enlaces de "leer más": texto en acento, sin barra naranja */ html.v10 .enlace-guia a,html.v10 .enlace-texto,html.v10 .ver-mas,html.v10 .faq-guia a,html.v10 .fin-mas a{font-family:var(--sans);font-weight:600;color:var(--acento);border-bottom:0!important;box-shadow:none!important;text-decoration:none;padding-bottom:0} html.v10 .enlace-guia a:hover,html.v10 .ver-mas:hover,html.v10 .enlace-texto:hover{text-decoration:underline} html.v10 .tarjeta-accion .ver-mas{border-bottom:0} html.v10 .seccion#dac .enlace-guia a,html.v10 .enlace-guia.claro a,html.v10 .dest-texto .ver-mas,html.v10 .dato-cfe-tarjeta .ver-mas{color:var(--acento-claro)!important} /* ---------- Ritmo de secciones ---------- */ html.v10 .seccion{padding:clamp(64px,9vw,128px) 0} html.v10 .banda-suave,html.v10 .v6-arena{background:var(--piedra)} html.v10 .titulo-simple{margin-bottom:8px} /* ---------- Encabezado ---------- */ html.v10 .header{background:rgba(251,250,247,.82);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px)} html.v10 .header.con-linea{border-bottom-color:var(--linea)} html.v10 .header .wrap{height:62px} html.v10 .nav a,html.v10 .nav-guia-btn{font-family:var(--sans);font-weight:600} /* ---------- Botones ---------- */ html.v10 .btn{font-family:var(--sans);font-weight:600;letter-spacing:-.005em} html.v10.boton-a .btn-wa,html.v10 .btn-wa{background:var(--tinta);color:#fff;box-shadow:none;border-radius:999px} html.v10.boton-a .btn-wa:hover,html.v10 .btn-wa:hover{background:#34322E;transform:none} html.v10 .btn-wa .wa-glifo{background:#25D366!important} html.v10 .btn-sec,html.v10 .btn-claro{border-radius:999px} /* Sobre fondo oscuro: botón claro */ html.v10 .seccion#dac .btn-wa,html.v10 .hero .btn-wa,html.v10 .art-cta .btn-wa,html.v10 .contacto .btn-wa, html.v10.boton-a .seccion#dac .btn-wa,html.v10.boton-a:not(.portada-anterior) .hero .btn-wa,html.v10.boton-a .art-cta .btn-wa,html.v10.boton-a .contacto .btn-wa{background:var(--papel)!important;color:var(--tinta)!important;box-shadow:none!important} html.v10 .wa-flotante{box-shadow:0 10px 24px -8px rgba(26,25,23,.45)} /* ---------- Portada (inicio) ---------- */ html.v10 .seccion#dac,html.v10 .contacto{background:var(--tinta)} html.v10 .hero h1{font-size:clamp(38px,6vw,72px);letter-spacing:-.018em;color:#fff;font-weight:600} /* El archivo de la serifa trae un solo peso, el 600. Donde algo pedía 700 o 750 el navegador fingía la negrita engordando el trazo: se veía sucia y más ancha que el resto. Aquí se devuelven al peso que sí existe y se apaga la negrita falsa por si algún día entra otro caso. */ html.v10 h1,html.v10 h2, html.v10 .portada-datos .nombre strong,html.v10 .garantia b small,html.v10 .garantia b, html.v10 .cifra b,html.v10 .financia-cifra,html.v10 .dac-cifra-grande, html.v10 .portada-datos b,html.v10 .portada-datos strong, html.v10 .proy-cifras b,html.v10 .art-dato b,html.v10 .art-cta strong, html.v10 .res-recibo b,html.v10 .dac-cifras b{font-synthesis-weight:none} html.v10 .garantia b small{font-weight:600} html.v10 .seccion#dac h2,html.v10 .seccion#dac h3,html.v10 .contacto h2{color:#fff} /* ---------- Tarjetas: planas, con línea fina ---------- */ html.v10 .tarjeta-guia,html.v10 .tarjeta-marca,html.v10 .garantia,html.v10 .resultado,html.v10 .proyecto,html.v10 .resena,html.v10 .cta-linea,html.v10 .inv-opcion,html.v10 .inv-caja{box-shadow:none!important;border:1px solid var(--linea);border-radius:var(--radio);background:#fff} html.v10 .tarjeta-guia:hover,html.v10 .tarjeta-marca:hover{transform:none;border-color:#CFC9BE} html.v10 .tarjeta-guia h3{font-family:var(--sans);font-size:18px;font-weight:700;color:var(--tinta)} html.v10 .tarjeta-guia .tg-meta{font-size:13px;font-weight:400;color:var(--gris);letter-spacing:0} html.v10 .tarjeta-guia .ver-mas{font-size:16px} html.v10 .cifra b,html.v10 .garantia b,html.v10 .financia-cifra,html.v10 .dac-cifra-grande,html.v10 .portada-datos b,html.v10 .proy-cifras b,html.v10 .art-dato b{font-family:var(--serif);font-weight:600;letter-spacing:-.01em} /* Marcas: tarjeta de producto con el render centrado en su propio fondo */ html.v10 .tarjeta-marca .producto{background:var(--piedra);display:flex;align-items:center;justify-content:center} html.v10 .tarjeta-marca .producto img{object-fit:contain;object-position:center;margin:auto} html.v10 .tarjeta-marca[data-abrir="estructura"] .producto img{max-width:92%;max-height:118px;mix-blend-mode:multiply} html.v10 .tarjeta-marca .logo-marca img{filter:grayscale(1) brightness(.25);opacity:.85} /* ---------- Columna de lectura de las guías ---------- El texto corrido se queda en 600 px: unos 75 caracteres por renglón, el borde alto de lo cómodo (lo sano es 45-75). Venía en 138 caracteres porque html.v10 .wrap (especificidad 0,2,1) le gana a .wrap.angosto (0,2,0) y anulaba los 780 px que el diseño ya pedía desde styles.css:914. Se angosta sólo lo que se lee renglón por renglón. Las tablas, las fotos, los diagramas, el ejemplo del recuadro y las ventanas se quedan a todo el ancho, porque ahí el ancho ayuda en vez de estorbar. */ html.v10 .art-cabeza .migas, html.v10 .art-cabeza h1, html.v10 .art-cabeza .art-desc, html.v10 .art-cabeza .art-autor, html.v10 .articulo-guia .art-resumen, html.v10 .art-cuerpo > p, html.v10 .art-cuerpo > h2, html.v10 .art-cuerpo > h3, html.v10 .art-cuerpo > h4, html.v10 .art-cuerpo > ul, html.v10 .art-cuerpo > ol, html.v10 .art-cuerpo > blockquote, html.v10 .art-cuerpo > .art-nota, html.v10 .art-cuerpo > .art-citar, html.v10 .art-cuerpo > .art-respuesta, html.v10 .art-cuerpo > .art-cta, html.v10 .art-cuerpo > .ind-a{max-width:600px} /* ---------- Artículos de la Guía Solar ---------- */ html.v10 .art-cabeza{background:var(--papel);padding:clamp(28px,5vw,64px) 0 8px;margin-bottom:0;border-bottom:0} html.v10 .art-cabeza h1{font-size:clamp(34px,5.2vw,56px);line-height:1.06;letter-spacing:-.016em;margin:.1em 0 .35em} html.v10 .art-autor{font-size:14px;color:var(--gris)} html.v10 .migas ol{font-size:14px} html.v10 .art-portada{box-shadow:none;border-radius:var(--radio);margin-top:22px} html.v10 .art-cuerpo{font-size:18px;line-height:1.66} html.v10 .art-cuerpo h2{font-size:clamp(25px,3.2vw,36px);margin:1.9em 0 .5em} /* El h3 estaba a 19.5 px: punto y medio sobre el cuerpo. La jerarquía descansaba toda en el peso, que es justo lo que se aplasta en Android. */ html.v10 .art-cuerpo h3{font-size:21px;margin:1.6em 0 .35em} html.v10 .art-cuerpo p{margin:0 0 1.05em} html.v10 .art-cuerpo li{margin:.35em 0} /* "Puntos clave": sin caja, entre dos líneas finas */ html.v10 .art-resumen{background:none!important;border:0;border-top:1px solid var(--tinta);border-bottom:1px solid var(--linea);border-radius:0;padding:16px 0 18px;margin:8px 0 32px} html.v10 .art-resumen::before{display:none} /* El > es necesario: sin él, :first-child también alcanza al que abre una viñeta (el texto que va antes no cuenta como hijo), lo vuelve bloque y parte la viñeta en tres renglones, con la coma abriendo el tercero. */ html.v10 .art-resumen > strong:first-child{display:block;font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--acento)} html.v10 .art-resumen ul{list-style:none;padding:0;margin:6px 0 0} html.v10 .art-resumen li{position:relative;padding-left:22px;margin:10px 0;font-size:18px;line-height:1.55} html.v10 .art-resumen li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:1.5px;background:var(--acento)} html.v10 .art-resumen li strong{text-transform:none!important;letter-spacing:0!important;font-size:inherit!important;color:var(--tinta)!important} /* Notas: una sola forma, fondo de piedra, sin borde */ html.v10 .art-nota{background:var(--piedra);border:0;border-radius:var(--radio-s);padding:18px 20px;font-size:18px;line-height:1.6} html.v10 .art-nota strong{color:var(--tinta)} html.v10 .art-alerta{background:var(--acento-suave);border:0} html.v10 .art-fuente{font-size:14px;line-height:1.55;color:var(--gris);margin-top:14px!important} html.v10 .art-fuente a{color:var(--gris);text-decoration:underline} /* Llamado a WhatsApp dentro de la guía */ html.v10 .art-cta{background:var(--tinta);border-radius:var(--radio);padding:26px 22px} html.v10 .art-cta strong{font-family:var(--serif);font-weight:600;font-size:25px;line-height:1.2;color:#fff} /* Pasos numerados */ html.v10 .art-pasos li::before{background:none;color:var(--acento);border:1.5px solid var(--acento);font-family:var(--sans);font-size:14px} html.v10 .art-pasos li{border-bottom-color:var(--linea)} /* Datos destacados */ html.v10 .art-dato{border-top:1px solid var(--tinta)} html.v10 .art-dato b{color:var(--tinta)} /* ---------- Tablas ---------- */ html.v10 .art-tabla,html.v10 .tar-tabla,html.v10 .tabla-grid{font-family:var(--sans);font-size:16px;line-height:1.45;border-collapse:collapse;background:none} html.v10 .art-tabla th,html.v10 .art-tabla td{padding:13px 10px;border-bottom:1px solid var(--linea)} html.v10 .art-tabla thead th{font-size:14px;font-weight:700;color:var(--gris);background:none!important;border-bottom:1px solid var(--tinta)!important;letter-spacing:0;text-transform:none;vertical-align:bottom} html.v10 .art-tabla td:first-child{color:var(--tinta);font-weight:700} html.v10 .inv-tabla-wrap,html.v10 .tar-tabla-wrap{border:0!important;border-radius:0!important;box-shadow:none!important;background:none!important} html.v10 .art-tabla tbody tr:nth-child(even){background:none} /* Columna destacada de la tabla bifacial */ html.v10 .art-cuerpo table.bif-tabla th.bif-esperar{background:none!important;color:var(--acento)!important;border-bottom-color:var(--acento)!important} /* La celda destacada va en la misma letra que el resto de la tabla: la serifa a 19 px dentro de una celda se veía como un cuerpo extraño. */ html.v10 .art-cuerpo table.bif-tabla td.bif-esperar{background:var(--acento-suave);color:var(--tinta);border:0;font-family:var(--sans);font-weight:700;font-size:16px} html.v10 .art-cuerpo table.bif-tabla{min-width:0} /* En celular, las tablas de texto se vuelven fichas: una por renglón */ @media (max-width:640px){ html.v10 table.apilar{display:block;width:100%;margin:18px 0} 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)} html.v10 table.apilar tr:first-child{border-top:1px solid var(--tinta)} 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:16px;background:none;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:6px;width:38%;font-family:var(--sans);font-size:13px;font-weight:400;color:var(--gris);line-height:1.35} html.v10 table.apilar tr > :first-child{display:block;padding-left:0;font-family:var(--sans);font-size:18px;font-weight:700;color:var(--tinta);margin-bottom:6px} html.v10 table.apilar tr > :first-child::before{display:none} html.v10 .inv-tabla-wrap:has(table.apilar){overflow:visible} html.v10 .art-cuerpo table.apilar.bif-tabla td.bif-esperar{background:none;font-size:inherit} html.v10 .art-cuerpo table.apilar.bif-tabla td.bif-esperar{color:var(--acento);font-family:var(--sans);font-weight:700;font-size:16px} } /* ---------- Preguntas frecuentes ---------- */ html.v10 .faq-item summary h3{font-family:var(--sans);font-size:18px;font-weight:700;color:var(--tinta)} html.v10 .faq-mas{border-color:var(--tinta)!important} html.v10 .faq-resp{color:var(--texto)} /* ---------- Nosotros: el equipo en celular ---------- */ @media (max-width:640px){ html.v10 .nos-equipo{grid-template-columns:1fr;gap:28px} html.v10 .persona{display:block} html.v10 .persona .retrato{width:100%;max-width:none;margin-bottom:12px} html.v10 .persona .retrato img{aspect-ratio:4/3} } /* ---------- Pie ---------- */ html.v10 footer{background:var(--piedra)} /* ---------- Ventanas que suben desde abajo ---------- */ html.v10 .hoja{background:var(--papel)} html.v10 .hoja-cabeza h2,html.v10 .hoja-cabeza .t{font-family:var(--serif)} /* Refuerzos sobre reglas de v6 con más peso */ html.v10 .art-cuerpo table.art-tabla,html.v10 .fin-ejemplo .art-tabla,html.v10 .tabla-grid{border:0!important;box-shadow:none!important;border-radius:0!important;outline:0;background:none!important} html.v10 .art-cuerpo table.art-tabla thead th,html.v10 .fin-ejemplo .art-tabla thead th,html.v10 .tabla-grid thead th{background:none!important;color:var(--gris)!important;font-size:14px;font-weight:700;border-bottom:1px solid var(--tinta)!important;border-right:0!important} html.v10 .art-cuerpo table.art-tabla td,html.v10 .art-cuerpo table.art-tabla th{border-right:0!important;border-left:0!important} html.v10 .art-cuerpo table.art-tabla tbody tr,html.v10 .art-cuerpo table.art-tabla tbody tr:nth-child(even) td{background:none!important} html.v10 .inv-elige-tit{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--acento)} html.v10 .inv-opcion b,html.v10 .inv-opcion strong{font-family:var(--sans)} html.v10 .inv-opcion[aria-selected="true"]{background:var(--tinta);border-color:var(--tinta)} html.v10 a.btn,html.v10 .btn-wa,html.v10.boton-a .btn-wa{color:#fff} html.v10 .migas a{color:var(--gris)} html.v10 .nav a,html.v10 .header a.logo,html.v10 footer nav a,html.v10 .tarjeta-guia,html.v10 .tarjeta-marca,html.v10 .ng-col a,html.v10 .pie-guias a{color:var(--tinta)} /* Portada en celular: tinta cálida, sin azul */ @media (max-width:900px){html.v10.tema-tinta:not(.portada-anterior) .hero{background:radial-gradient(140% 90% at 100% 0%,#3A2A22 0%,#1A1917 62%)}} /* Cifras grandes con serifa */ html.v10 .financia-cifra b,html.v10 .financia-cifra strong,html.v10 .dac-cifras b,html.v10 .portada-datos b,html.v10 .portada-datos strong,html.v10 .res-recibo b{font-family:var(--serif);font-weight:600} /* Tarjeta final de contacto: texto oscuro sobre el cielo, con velo para que se lea */ html.v10 .cierre-texto{background:linear-gradient(180deg,rgba(251,250,247,.0),rgba(251,250,247,0))} html.v10 .cierre-texto p,html.v10 .cierre-texto strong{color:var(--tinta)!important;text-shadow:0 0 18px rgba(255,255,255,.65)} html.v10 .btn-barra{color:#fff} html.v10 .nombre,html.v10 .nombre *{font-family:var(--sans)} /* El "¿Por qué Japón?" era el único rótulo del sitio en versalitas espaciadas y en serifa de 12.5 px. Ahora es un rótulo igual a todos los demás. */ html.v10 .portada-datos .nombre strong{display:block;font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--acento);margin-bottom:6px} html.v10 .financia-cifra small,html.v10 .financia-cifra em,html.v10 .dac-cifra-grande small,html.v10 .dac-cifra-grande span{font-family:var(--sans)!important;letter-spacing:0;text-transform:none} /* Renders de Unirac: completos, centrados, sin recortes */ html.v10 .art-foto img[src*="unirac-"],html.v10 .art-figura img[src*="unirac-"],html.v10 .hoja img[src*="unirac-"]{aspect-ratio:auto!important;height:auto!important;object-fit:contain!important;object-position:center!important} /* Los puntos clave: la negrita no deja comas colgando al inicio del renglón */ html.v10 .art-resumen li{text-wrap:pretty} /* ---------- Gráfica de precios de baterías ---------- */ html.v10 .bat-grafica svg .bg-tit{fill:var(--tinta)} html.v10 .bat-grafica svg .bg-val{fill:var(--tinta)} html.v10 .bat-grafica svg .bg-sub{fill:var(--gris)} html.v10 .bat-grafica svg rect[fill="#13284F"]{fill:var(--tinta)} html.v10 .bat-grafica svg rect[stroke="#13284F"]{stroke:var(--tinta)} html.v10 .bat-grafica figcaption{margin-top:10px} /* ---------- /guia/ reorganizada (ronda v20, 4 de octubre de 2026) ---------- Cabecera igual; debajo la lista "Temas" con el resumen de cada área; sin guía destacada; Datos de CFE primero en tarjeta pequeña con la miniatura de la gráfica. Si algún día se quiere el estilo de portada del NYT, se cambia aquí y en build.py (sección GUÍA: centro), no en las guías. */ html.v10 .guia-temas{margin:26px 0 14px} html.v10 .guia-portada .guia-temas h2{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin:0 0 4px} html.v10 .guia-temas ul{list-style:none;margin:0;padding:0} html.v10 .guia-temas a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--linea);text-decoration:none;color:var(--tinta)} html.v10 .guia-temas b{display:block;font-size:17px;font-weight:600;color:var(--tinta)} html.v10 .guia-temas .gt-texto span{display:block;font-size:14px;line-height:1.4;color:#44413C;margin-top:2px} html.v10 .guia-temas .gt-chev{width:18px;height:18px;flex:none;color:#9A4420} html.v10 .guia-cat-cab{margin-top:8px} html.v10 .tarjeta-guia .tg-img img[src$=".svg"]{background:#F3F0EA} @media (min-width:641px){html.v10 .guia-temas ul{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}} /* en celular la miniatura vertical no manda en la altura de la tarjeta: se recorta al hueco que dejan los textos */ @media (max-width:640px){html.v10 .rejilla-guias:not(.compacta) .tarjeta-guia .tg-img{position:relative} html.v10 .rejilla-guias:not(.compacta) .tarjeta-guia .tg-img img[src$=".svg"]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}} /* ---------- portada v20: primera pantalla (decisiones de Alex, 4 de octubre de 2026) ---------- Celular: la foto va arriba a su tamaño real (350 px; no se amplía, por eso no se ve borrosa), un velo de abajo hacia arriba y el texto montado sobre su parte baja. Título de cuatro palabras, sin párrafo, un botón + enlace. La foto "cae en su lugar" al cargar (sin movimiento si el sistema lo pide). Escritorio: la misma portada de antes con el texto nuevo. */ html.v10 .hero .hero-enlace{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:4px 0;font-family:var(--sans);font-weight:600;font-size:16px;color:#F3C98C;text-decoration:none} html.v10 .hero .hero-enlace:hover{text-decoration:underline} html.v10 .hero.hero-v20 h1{text-wrap:balance} @media (max-width:640px){ html.v10.tema-tinta.boton-a .hero.hero-v20{display:block;position:relative;min-height:0!important;height:auto!important;padding-top:350px;background:#1A1917!important;overflow:hidden} html.v10.tema-tinta.boton-a .hero.hero-v20 .hero-real{position:absolute;top:0;left:0;right:0;bottom:auto;height:350px;display:block} html.v10.tema-tinta.boton-a .hero.hero-v20 .hero-real img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:58% 45%} html.v10.tema-tinta.boton-a .hero.hero-v20::after{content:"";display:block;position:absolute;inset:0 0 auto 0;height:350px;background:linear-gradient(180deg,rgba(20,19,17,0) 0%,rgba(20,19,17,0) 45%,rgba(20,19,17,.55) 75%,rgba(20,19,17,1) 100%);pointer-events:none} html.v10.tema-tinta.boton-a .hero.hero-v20 .hero-contenido{position:relative;z-index:1;margin-top:-78px;padding:0 var(--gutter,16px) 28px!important} html.v10.tema-tinta.boton-a .hero.hero-v20 .eyebrow{color:#F3C98C!important;font-size:14px;margin-bottom:10px} html.v10.tema-tinta.boton-a .hero.hero-v20 h1{font-size:44px;line-height:1.02;letter-spacing:-.018em;color:#fff;max-width:12ch;margin:0 0 22px} html.v10.tema-tinta.boton-a .hero.hero-v20 .acciones{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:0} html.v10.tema-tinta.boton-a .hero.hero-v20 .btn-wa,html.v10.tema-tinta.boton-a:not(.portada-anterior) .hero.hero-v20 .btn-wa{width:100%;justify-content:center;min-height:54px;font-size:17px;background:var(--papel)!important;color:var(--tinta)!important;box-shadow:none} html.v10.tema-tinta.boton-a .hero.hero-v20 .hero-real img{animation:hero-cae .9s cubic-bezier(.2,.7,.2,1) both} html.v10 .portada-datos .cifras{margin-top:18px!important} /* barra: en la portada el botón de WhatsApp empieza oculto y aparece cuando el botón grande sale de la pantalla (main.js) */ html.v10.boton-a:not(.sin-js) body:not(.subpagina) .header .btn-barra{opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s} html.v10.boton-a:not(.sin-js) body:not(.subpagina).cta-barra .header .btn-barra{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .25s ease,transform .25s ease,visibility 0s} html.v10.boton-a .header .btn-barra{min-height:44px} } @keyframes hero-cae{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){html.v10 .hero.hero-v20 .hero-real img{animation:none!important}html.v10.boton-a:not(.sin-js) body:not(.subpagina) .header .btn-barra{transition:none!important}} /* ---------- marcas v20: tarjetas que se apilan (decisión de Alex, 4 de octubre de 2026) ---------- Compactación como stripe.com/mx en celular (medida): cada tarjeta es sticky con top escalonado (63 px de barra + 10 + 64 por tarjeta); al llegar la siguiente, de la anterior queda su cabecera entera. Stripe escalona 32 px y recorta el logo; aquí el escalón es la cabecera completa para que los logotipos nunca se recorten ni se escalen. CSS puro: sin script, sin animación. */ html.v10 .pila-marcas.pila-s{display:grid;gap:14px;margin-top:8px} html.v10 .pila-marcas.pila-s .pila-fin{height:240px;margin-top:-14px} /* deja la pila compactada a la vista mientras se lee la última tarjeta */ html.v10 .pila-marcas.pila-s .tm{position:sticky;top:calc(63px + 10px + var(--i) * 64px);border-radius:18px;overflow:hidden;min-height:0;display:block;box-shadow:0 -4px 18px rgba(26,25,23,.08),0 12px 30px rgba(26,25,23,.12)} html.v10 .pila-marcas.pila-s .tm-cab{display:grid;grid-template-columns:112px 1fr;column-gap:14px;align-items:center;height:64px;padding:0 20px;border-bottom:1px solid var(--linea);margin:0} html.v10 .pila-marcas.pila-s .tm-logos{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;min-height:0;background:none;padding:0} html.v10 .pila-marcas.pila-s .tm-logos img{height:22px;width:auto;max-width:112px;object-fit:contain} html.v10 .pila-marcas.pila-s .tm-paneles .tm-logos img{height:17px} html.v10 .pila-marcas.pila-s .tm-cab h3{font-family:var(--sans);font-size:16px;font-weight:600;line-height:1.2;letter-spacing:0;margin:0;color:var(--tinta)} html.v10 .pila-marcas.pila-s .tm-cuerpo{padding:16px 20px 20px;display:flex;flex-direction:column;gap:10px} html.v10 .pila-marcas.pila-s .tm-cat{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6A6660} html.v10 .pila-marcas.pila-s p{font-size:16px;line-height:1.5;margin:0;color:#44413C} html.v10 .pila-marcas.pila-s .tm-img{display:flex;justify-content:center;align-items:flex-end;padding:0;min-height:0;margin:4px 0} html.v10 .pila-marcas.pila-s .tm-estructura .tm-img picture{display:block;width:100%} html.v10 .pila-marcas.pila-s .tm-estructura .tm-img img{width:100%;height:176px;object-fit:cover;object-position:50% 25%;mix-blend-mode:multiply;border-radius:12px} /* el render viene sobre blanco con una línea de piso abajo: multiplicar lo funde con el fondo y el recorte deja fuera la línea */ html.v10 .pila-marcas.pila-s .tm-inversores .tm-img img{height:170px;width:auto;margin:0} html.v10 .pila-marcas.pila-s .tm-paneles .tm-img img{height:210px;width:auto;margin:0 0 4px;transform:rotate(-8deg)} html.v10 .pila-marcas.pila-s .tm-btn{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:44px;padding:10px 18px;border-radius:999px;font-family:var(--sans);font-weight:600;font-size:15px;text-decoration:none;background:var(--tinta);color:#fff;margin-top:4px} html.v10 .pila-marcas.pila-s .tm-claro{background:#F3F0EA} html.v10 .pila-marcas.pila-s .tm-blanco{background:#FFFFFF;border:1px solid var(--linea)} html.v10 .pila-marcas.pila-s .tm-blanco .tm-cab{height:62px} @media (min-width:641px){html.v10 .pila-marcas.pila-s .tm-cuerpo{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;align-content:start;column-gap:34px;padding:26px 30px 30px}html.v10 .pila-marcas.pila-s .tm-cat{grid-column:1}html.v10 .pila-marcas.pila-s p{grid-column:1}html.v10 .pila-marcas.pila-s .tm-btn{grid-column:1;justify-self:start}html.v10 .pila-marcas.pila-s .tm-img{grid-column:2;grid-row:1/4;align-items:center;align-self:center}html.v10 .pila-marcas.pila-s .tm-estructura .tm-img img{height:260px;object-position:50% 25%}} /* ---------- X de las ventanas = X del menú (5 de octubre de 2026): círculo, X terracota oscura sobre el tinte del naranja del logo ---------- */ html.v10 .hoja-x{width:44px;height:44px;display:grid;place-items:center;background:#F7E9D5;color:#9A4420;border-radius:50%;top:12px;right:12px;font-size:0;-webkit-tap-highlight-color:transparent;transition:background-color .2s} html.v10 .hoja-x svg{width:22px;height:22px} html.v10 .hoja-x:active{background:#F0DBB8} html.v10 .hoja-x:focus:not(:focus-visible){outline:0} /* los botones de las tarjetas de marcas son