/* ═══════════════════════════════════════════════════════════════════════════ AIMA · assets/aima-estetica.css — LA LETRA DE PACKS, EN EL RESTO DE LA WEB ─────────────────────────────────────────────────────────────────────────── 17/10/2026 · Bratney: «adaptar portafolio, asistencia, desarrolladores, qué es AIMA, el bot, material, perfil, pedidos y cola de pedidos a las tipografías y a la forma de expresar las ideas de los productos (packs de marketing, tecnologías e IA, diseño gráfico), para que sea uniforme. No hay que cambiar estructura. El blanco tiene que seguir siendo el color que más predomine en cada página». 17/10/2026 · 19:54 · y la regla que manda: «como principal las letras tipo Impact, y luego las elegantes como el complemento». LA FORMA, como en las portadas de producto («PACKS MARKETING», «DISEÑO GRÁFICO IDENTIDAD», «TECNOLOGÍAS E IA»): Anton (la de tipo Impact) MANDA → el titular grande de cada página, en mayúsculas, con su palabra clave en rojo; los nombres, las cifras y los rótulos. Cormorant Garamond ACOMPAÑA → la frase de debajo del titular, los títulos de sección y la palabra clave en cursiva roja cuando un titular en Anton lleva complemento («LAS SIETE rutas»). Montserrat → todo lo que se lee y se pulsa. POPPINS E INTER YA NO SALEN. En estas páginas el nombre «Poppins» (e «Inter» y «AIMA Negra») apunta a Montserrat: así cualquier rincón que aún lo diga —una ventana, un cajón, un aviso que crea un script— sale en la letra AIMA sin perseguir regla a regla. Cuando el rediseño limpie el CSS de cada página, este cambio de nombre sobra y se quita. QUÉ ES. La hoja que sustituye a la «piel Instagram» (aima-piel.css + aima-piel-web.css) en las páginas que la llevaban. Esas páginas ya traían dentro la estética «cartel» de Packs; la piel la tapaba. Sin la piel vuelve a verse, y esta hoja remata lo que quedaba. · LOS FONDOS NO SE TOCAN: ninguna regla cambia un color de fondo. · LA PANTALLA DE APP DEL MÓVIL (body.appm, la monta aima-app-movil.js) es otra cosa y no se toca: cada regla de página va con body:not(.appm). CÓMO SE ENGANCHA. Cada página lleva y la línea de esta hoja al final del . Quitar las dos cosas es volver a la página sin piel (y reponer la piel: ver la copia .ANTES de cada una). Las letras propias viven en assets/fuentes/ (OFL 1.1). ═══════════════════════════════════════════════════════════════════════════ */ /* ── 0 · LAS LETRAS ──────────────────────────────────────────────────────── */ @font-face{font-family:'AIMA Cormorant';font-style:normal;font-weight:500;font-display:swap;src:url(fuentes/cormorant-garamond-latin-500-normal.woff2) format('woff2')} @font-face{font-family:'AIMA Cormorant';font-style:italic;font-weight:500;font-display:swap;src:url(fuentes/cormorant-garamond-latin-500-italic.woff2) format('woff2')} @font-face{font-family:'AIMA Cormorant';font-style:normal;font-weight:600;font-display:swap;src:url(fuentes/cormorant-garamond-latin-600-normal.woff2) format('woff2')} @font-face{font-family:'AIMA Cormorant';font-style:italic;font-weight:600;font-display:swap;src:url(fuentes/cormorant-garamond-latin-600-italic.woff2) format('woff2')} @font-face{font-family:'AIMA Anton';font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/anton-latin-400-normal.woff2) format('woff2')} /* Las tres de la casa también con su propio nombre. Hay páginas que las usan sin pedirlas a Google (contacto pide Montserrat y Cormorant, pero su titular es Anton; los legales no piden Anton; flujos, datos y la cuenta no piden Cormorant): sin esto, ese texto caía en la letra del sistema. Solo el alfabeto latino, como el tramo «latin» de Google; lo demás lo sigue sirviendo Google si la página lo pide. */ @font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/anton-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(fuentes/cormorant-garamond-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(fuentes/cormorant-garamond-latin-500-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(fuentes/cormorant-garamond-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url(fuentes/cormorant-garamond-latin-600-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/montserrat-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(fuentes/montserrat-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(fuentes/montserrat-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(fuentes/montserrat-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url(fuentes/montserrat-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* «Poppins», «Inter» y «AIMA Negra» → Montserrat, peso a peso (pesos exactos: así ganan a cualquier otra definición con el mismo nombre que cargue antes la página; el 900 cae en el 800) */ @font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(fuentes/montserrat-latin-400-normal.woff2) format('woff2')} @font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/montserrat-latin-400-normal.woff2) format('woff2')} @font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(fuentes/montserrat-latin-500-normal.woff2) format('woff2')} @font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fuentes/montserrat-latin-600-normal.woff2) format('woff2')} @font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fuentes/montserrat-latin-700-normal.woff2) format('woff2')} @font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(fuentes/montserrat-latin-800-normal.woff2) format('woff2')} @font-face{font-family:'Poppins';font-style:normal;font-weight:900;font-display:swap;src:url(fuentes/montserrat-latin-800-normal.woff2) format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(fuentes/montserrat-latin-400-normal.woff2) format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/montserrat-latin-400-normal.woff2) format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fuentes/montserrat-latin-500-normal.woff2) format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fuentes/montserrat-latin-600-normal.woff2) format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(fuentes/montserrat-latin-700-normal.woff2) format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(fuentes/montserrat-latin-700-normal.woff2) format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url(fuentes/montserrat-latin-700-normal.woff2) format('woff2')} @font-face{font-family:'AIMA Negra';font-style:normal;font-weight:700;font-display:swap;src:url(fuentes/montserrat-latin-700-normal.woff2) format('woff2')} @font-face{font-family:'AIMA Negra';font-style:normal;font-weight:800;font-display:swap;src:url(fuentes/montserrat-latin-800-normal.woff2) format('woff2')} @font-face{font-family:'AIMA Negra';font-style:normal;font-weight:900;font-display:swap;src:url(fuentes/montserrat-latin-800-normal.woff2) format('woff2')} /* ── 1 · LAS MEDIDAS DE PACKS ────────────────────────────────────────────── */ html[data-estetica]{ --ae-pack:'Anton','AIMA Anton','Impact','Arial Narrow Bold',sans-serif; --ae-display:'Cormorant Garamond','AIMA Cormorant','Iowan Old Style','Times New Roman',serif; --ae-body:'Montserrat','Helvetica Neue',Arial,sans-serif; --ae-red:#C1272D; --ae-t2:#56565C; --ae-facet:polygon(10% 16%,92% 0%,100% 55%,96% 92%,0% 96%); } /* ── 1b · LO COMÚN A ESTAS PÁGINAS ─────────────────────────────────────────── */ /* La casilla de la sesión (la mete aima-sesion.js) caía en MEDIO de la cabecera en las páginas que solo tienen logo y menú (API, flujos, datos, equipo): con tres piezas y space-between, la del centro se va al centro. El logo empuja ahora todo lo demás a la derecha, junto al menú. */ html[data-estetica] body:not(.appm) .brandbar-in > .brand{margin-right:auto} /* ═══════════════════════════════════════════════════════════════════════════ 2 · ASISTENCIA · contacto.html (el titular ya era Anton: se queda) ═══════════════════════════════════════════════════════════════════════════ */ html[data-estetica="contacto"] body:not(.appm) .tag{font:600 10.5px/1.2 var(--ae-body);letter-spacing:.26em;color:var(--ae-t2)} html[data-estetica="contacto"] body:not(.appm) .tag .facet{width:9px;height:8px} html[data-estetica="contacto"] body:not(.appm) .canal h3{font:700 17.5px/1.25 var(--ae-body);letter-spacing:-.005em} html[data-estetica="contacto"] body:not(.appm) .canal .dato{font-family:var(--ae-body);font-weight:600;letter-spacing:-.005em;font-variant-numeric:lining-nums tabular-nums} html[data-estetica="contacto"] body:not(.appm) .cup-kick{letter-spacing:.26em} /* el cupón: Anton manda y la clave subrayada va de complemento, en cursiva */ html[data-estetica="contacto"] body:not(.appm) .cup-tit{font-family:var(--ae-pack);font-weight:400;text-transform:uppercase;font-size:clamp(22px,2.6vw,30px);line-height:1.08;letter-spacing:.012em} html[data-estetica="contacto"] body:not(.appm) .cup-tit u{font-family:var(--ae-display);font-style:italic;font-weight:600;text-transform:none;font-size:1.14em;letter-spacing:-.005em} html[data-estetica="contacto"] body:not(.appm) #aima-lead .alv-kicker{letter-spacing:.26em} /* ═══════════════════════════════════════════════════════════════════════════ 3 · COLA DE PEDIDOS · pedidos.html (era «cartel»: el titular pasa a Anton) ═══════════════════════════════════════════════════════════════════════════ */ html[data-estetica="pedidos"] body:not(.appm) .tag{font:600 10.5px/1.2 var(--ae-body);letter-spacing:.26em;color:var(--ae-t2)} html[data-estetica="pedidos"] body:not(.appm) #hero h1{font-family:var(--ae-pack);font-weight:400;text-transform:uppercase;font-size:clamp(44px,7vw,96px);line-height:1.02;letter-spacing:.012em} html[data-estetica="pedidos"] body:not(.appm) #hero h1 em{font-family:var(--ae-pack);font-style:normal;font-weight:400} html[data-estetica="pedidos"] body:not(.appm) #hero .lead{margin-top:clamp(16px,2.4vh,26px)} html[data-estetica="pedidos"] body:not(.appm) .pp-cab .kicker, html[data-estetica="pedidos"] body:not(.appm) .espera-cab .kicker{letter-spacing:.26em} html[data-estetica="pedidos"] body:not(.appm) .pu .qu b, html[data-estetica="pedidos"] body:not(.appm) .lt b, html[data-estetica="pedidos"] body:not(.appm) .pm b{font-weight:700;letter-spacing:-.005em} /* los numeritos de apoyo (los pasos 01…05, el 1·2·3·4 de cada puesto, los ocupados) no son titulares: Cormorant */ html[data-estetica="pedidos"] body:not(.appm) :is(.lt .bolita,.pu .n,#colaOcupados){font-family:var(--ae-display);font-weight:600;font-variant-numeric:lining-nums;letter-spacing:0} html[data-estetica="pedidos"] body:not(.appm) .lt .bolita{font-size:17px} html[data-estetica="pedidos"] body:not(.appm) .pu .n{font-size:19px} html[data-estetica="pedidos"] body:not(.appm) #colaOcupados{font-size:19px} /* 🟠 arreglo: «el siguiente hueco» lleva hidden cuando no hay nada que decir, pero su display:flex le ganaba al hidden y salía una pastilla gris vacía entre el estado de la cola y los cuatro puestos */ html[data-estetica="pedidos"] .cola-proximo[hidden]{display:none} /* «Entra a tu pedido» es corta y «Por dónde pasa tu pedido» larga: en escritorio la tarjeta negra acompaña al leer, en vez de quedarse arriba con un hueco debajo */ @media (min-width:900px){html[data-estetica="pedidos"] body:not(.appm) .mio .acceso{position:sticky;top:96px}} /* ═══════════════════════════════════════════════════════════════════════════ 4 · PORTAFOLIO · portafolio.html (la portada ya era Anton: se queda) El perfil de Instagram conserva su forma y habla en Montserrat. ═══════════════════════════════════════════════════════════════════════════ */ html[data-estetica="portafolio"] body:not(.appm) .rv-in .et{letter-spacing:.26em} html[data-estetica="portafolio"] body:not(.appm) .p-nombre h1{font-weight:700;letter-spacing:-.01em} /* el titular de la portada en dos tiempos: la tilde de «CATÁLOGO» no debe pisar la «NO» de la línea de arriba */ html[data-estetica="portafolio"] body:not(.appm) .rv-in h2{line-height:1.05} /* el lema del perfil, de complemento: Cormorant derecho con la clave en cursiva roja (como el lema de Packs) */ html[data-estetica="portafolio"] body:not(.appm) .p-bio .lema{font-family:var(--ae-display);font-style:normal;font-weight:600;font-size:clamp(18px,4.4vw,23px);line-height:1.28} html[data-estetica="portafolio"] body:not(.appm) .p-bio .lema em{font-family:var(--ae-display);font-style:italic} /* ═══════════════════════════════════════════════════════════════════════════ 5 · DESARROLLADORES · desarrolladores.html (el titular ya era Anton) ═══════════════════════════════════════════════════════════════════════════ */ html[data-estetica="desarrolladores"]{--f-ui:var(--ae-body)} html[data-estetica="desarrolladores"] body:not(.appm) .versal{font-family:var(--ae-body);font-weight:600;letter-spacing:.26em} html[data-estetica="desarrolladores"] body:not(.appm) .bandera{width:9px;height:8px;clip-path:var(--ae-facet)} /* el saludo, de complemento: derecho, con «Buenas tardes» en cursiva roja */ html[data-estetica="desarrolladores"] body:not(.appm) .saludo{font-style:normal;font-weight:500} html[data-estetica="desarrolladores"] body:not(.appm) .saludo span{font-style:italic} html[data-estetica="desarrolladores"] body:not(.appm) .chip__nombre{font-weight:700;letter-spacing:-.005em} /* ═══════════════════════════════════════════════════════════════════════════ 6 · LA API DE AMI · api-ami.html (ya era Anton con su complemento: se queda) ═══════════════════════════════════════════════════════════════════════════ */ html[data-estetica="api-ami"] body:not(.appm) .hero-kicker{font:600 10.5px/1.2 var(--ae-body);letter-spacing:.26em} /* ═══════════════════════════════════════════════════════════════════════════ 7 · LOS FLUJOS · flujos.html ═══════════════════════════════════════════════════════════════════════════ */ html[data-estetica="flujos"] body:not(.appm) .et{font:600 10.5px/1.2 var(--ae-body);letter-spacing:.26em} /* «LOS NODOS, SÍ. las llaves, no.»: la segunda frase era Anton torcida a la fuerza; pasa a complemento */ html[data-estetica="flujos"] body:not(.appm) .cierre h2 em{font-family:var(--ae-display);font-style:italic;font-weight:600;text-transform:none;font-size:1.16em;letter-spacing:-.005em} /* ═══════════════════════════════════════════════════════════════════════════ 8 · EL EQUIPO · equipo.html (el titular pasa a Anton; el nombre ya lo era) ═══════════════════════════════════════════════════════════════════════════ */ html[data-estetica="equipo"] body:not(.appm) .tag{font:600 10.5px/1.2 var(--ae-body);letter-spacing:.26em;color:var(--ae-t2)} html[data-estetica="equipo"] body:not(.appm) #hero h1{font-family:var(--ae-pack);font-weight:400;text-transform:uppercase;font-size:clamp(44px,7vw,96px);line-height:1.02;letter-spacing:.012em} html[data-estetica="equipo"] body:not(.appm) #hero h1 em{font-family:var(--ae-pack);font-style:normal;font-weight:400} html[data-estetica="equipo"] body:not(.appm) .pp-cab .kicker{letter-spacing:.26em} /* «Especialista en inteligencia artificial…», de complemento: derecho, la clave en cursiva roja */ html[data-estetica="equipo"] body:not(.appm) .quien .cargo{font-style:normal} html[data-estetica="equipo"] body:not(.appm) .quien .cargo b{font-style:italic} /* ═══════════════════════════════════════════════════════════════════════════ 9 · EL NÚCLEO DE DATOS · datos.html ═══════════════════════════════════════════════════════════════════════════ */ html[data-estetica="datos"] body:not(.appm) .et{font:600 10.5px/1.2 var(--ae-body);letter-spacing:.26em} /* «LAS DIEZ tablas»: como en la API, Anton manda (en mayúsculas, como siempre en Packs) y la clave va de complemento en cursiva */ html[data-estetica="datos"] body:not(.appm) .bloque h2{text-transform:uppercase} html[data-estetica="datos"] body:not(.appm) .bloque h2 em{font-family:var(--ae-display);font-style:italic;font-weight:600;text-transform:none;font-size:1.14em;letter-spacing:-.005em} /* 🟠 arreglo que vivía dentro de la piel (no era piel): las tres láminas de grabado son PNG en gris SIN canal alfa; la máscara lee el alfa y salían tres cuadrados grises. En luminancia sale el grabado. */ html[data-estetica="datos"] .lamina{-webkit-mask-source-type:luminance;mask-mode:luminance} /* ═══════════════════════════════════════════════════════════════════════════ 10 · MATERIAL · material.html (el muro es cartel: Anton se queda) ═══════════════════════════════════════════════════════════════════════════ */ html[data-estetica="material"] body:not(.appm) .mu-packs-rot{letter-spacing:.26em} /* ═══════════════════════════════════════════════════════════════════════════ 10b · QUÉ ES AIMA · que-es.html (la torre ya era Anton y oscura: se queda) Solo la muestra de letras de la sala de diseño, que ahora enseña las tres de la casa: Anton manda, Cormorant acompaña, Montserrat para leer. ═══════════════════════════════════════════════════════════════════════════ */ html[data-estetica="que-es"] body:not(.appm) .letra-fila .m-pop{font:600 clamp(20px,2.3vw,29px)/1.15 var(--ae-display);letter-spacing:-.01em} html[data-estetica="que-es"] body:not(.appm) .letra-fila .m-pop em{font-style:italic;color:var(--ae-red)} /* ═══════════════════════════════════════════════════════════════════════════ 10c · PREGUNTAS FRECUENTES · preguntas-frecuentes.html (titular a Anton) ═══════════════════════════════════════════════════════════════════════════ */ html[data-estetica="preguntas"] body:not(.appm) #hero h1{font-family:var(--ae-pack);font-weight:400;text-transform:uppercase;font-size:clamp(44px,7vw,96px);line-height:1.02;letter-spacing:.012em} html[data-estetica="preguntas"] body:not(.appm) #hero h1 em{font-family:var(--ae-pack);font-style:normal;font-weight:400} html[data-estetica="preguntas"] body:not(.appm) #hero .lead{margin-top:clamp(16px,2.4vh,26px)} /* ═══════════════════════════════════════════════════════════════════════════ 10d · ESTUDIO DE MERCADO · estudio-de-mercado.html Se diseñó sobre la piel y la piel se queda (sus tarjetas y variables cuelgan de ella). Cambia la letra: titular en Anton; los títulos de sección, Anton con su segunda frase de complemento en Cormorant cursiva («ESTO ES UNA VALORACIÓN NUESTRA. Y se mide así.»); las cifras siguen en su serif. ═══════════════════════════════════════════════════════════════════════════ */ html[data-estetica="estudio"] body:not(.appm) .em-hero-t h1{font-family:var(--ae-pack);font-weight:400;text-transform:uppercase;letter-spacing:.012em;font-size:clamp(46px,7vw,96px);line-height:1.02} html[data-estetica="estudio"] body:not(.appm) .em-hero-t h1 em{font-family:var(--ae-pack);font-style:normal;font-weight:400} html[data-estetica="estudio"] body:not(.appm) .em-cab h2{font-family:var(--ae-pack);font-weight:400;text-transform:uppercase;letter-spacing:.012em;font-size:clamp(32px,4vw,50px);line-height:1.06} html[data-estetica="estudio"] body:not(.appm) .em-cab h2 em{font-family:var(--ae-display);font-style:italic;font-weight:600;text-transform:none;font-size:1.14em;letter-spacing:-.005em} html[data-estetica="estudio"] body:not(.appm) .em-p-cab h3{font-family:var(--ae-pack);font-weight:400;text-transform:uppercase;letter-spacing:.012em;font-size:clamp(30px,3.2vw,42px);line-height:1.02} html[data-estetica="estudio"] body:not(.appm) .em-titular{font-family:var(--ae-display);font-weight:600;letter-spacing:-.008em;font-size:clamp(26px,2.6vw,33px);line-height:1.18} html[data-estetica="estudio"] body:not(.appm) :is(.em-reglas h3,.em-embudo h3,.em-sector b,.em-exp-bl b,.em-evid summary b,.em-ev-bl,.em-reglas .n){font-weight:700;letter-spacing:-.005em} html[data-estetica="estudio"] body:not(.appm) :is(.piel-ceja,.piel-rotu){font-family:var(--ae-body);letter-spacing:.26em} /* la raya roja de la ceja de la piel → el cuadrado imperfecto de Packs */ html[data-estetica="estudio"] body:not(.appm) :is(.piel-ceja,.piel-rotu)::before{width:9px;height:8px;border-radius:0;background:var(--ae-red);clip-path:var(--ae-facet)} /* ═══════════════════════════════════════════════════════════════════════════ 10e · NUESTROS PRODUCTOS · productos.html El titular vuelve a Anton, en mayúsculas, como las portadas de cada producto (el bloque «aima-titulo-productos» del 17/10 lo había pasado a Cormorant). ═══════════════════════════════════════════════════════════════════════════ */ html[data-estetica="productos"] body:not(.appm) #hero h1{font-family:var(--ae-pack);font-weight:400;text-transform:uppercase;font-size:clamp(44px,7vw,96px);line-height:1.02;letter-spacing:.012em} html[data-estetica="productos"] body:not(.appm) #hero h1 em{font-family:var(--ae-pack);font-style:normal;font-weight:400} /* el 01…07 de cada fila no es un titular: Cormorant */ html[data-estetica="productos"] body:not(.appm) .pr-barra .ix{font-family:var(--ae-display);font-weight:600;font-style:normal;font-variant-numeric:lining-nums;font-size:17px;letter-spacing:0} /* «SE TASA», en el hueco del precio: Anton, en mayúsculas como el resto del cartel */ html[data-estetica="productos"] body:not(.appm) :is(.esc-precio,.precio) > b{text-transform:uppercase} /* ═══════════════════════════════════════════════════════════════════════════ 10f · SALA DE ESPERA · espera.html (oscura: el fondo no se toca) Ya era Anton; solo le faltaban las mayúsculas, como en Packs. ═══════════════════════════════════════════════════════════════════════════ */ html[data-estetica="espera"] body:not(.appm) #choose h1, html[data-estetica="espera"] body:not(.appm) #choose .card .ct{text-transform:uppercase} /* ═══════════════════════════════════════════════════════════════════════════ 10g · LOS LEGALES · aviso-legal.html · privacidad.html · cookies.html Son una hoja de papel (membrete, filete doble, números romanos) y se quedan así. El título, como en Desarrolladores, en Anton; la fecha y los apartados siguen en Cormorant, de complemento. También en la hoja de imprimir. ═══════════════════════════════════════════════════════════════════════════ */ html[data-estetica="legal"] body:not(.appm) #folio .fdoc h1{font-family:var(--ae-pack);font-weight:400;text-transform:uppercase;letter-spacing:.012em;font-size:clamp(2.5rem,7vw,3.9rem);line-height:1.02} html[data-estetica="legal"] body:not(.appm) #folio .hoja h1{font-family:var(--ae-pack);font-weight:400;text-transform:uppercase;letter-spacing:.012em;font-size:2.75rem;line-height:1.02} /* ═══════════════════════════════════════════════════════════════════════════ 11 · LA CUENTA (app) · mi-perfil.html · mis-pedidos.html · login.html Los titulares ya eran Anton y se quedan; aquí solo los rótulos y «Tu plan». ═══════════════════════════════════════════════════════════════════════════ */ /* rótulos de tarjeta («Tus datos», «Tu tarjeta»…): ceja de Packs */ html[data-estetica="mi-perfil"] body:not(.appm) .mp-ficha > h2, html[data-estetica="mi-perfil"] body:not(.appm) .mp-adios > h2{letter-spacing:.26em} /* «Tu plan», título de sección: de complemento, en Cormorant */ html[data-estetica="mi-perfil"] body:not(.appm) .mp-planes > h2{font-family:var(--ae-display);font-weight:600;font-size:clamp(34px,3.6vw,44px);line-height:1.04;letter-spacing:-.01em} html[data-estetica="login"] body:not(.appm) #equipo-tit{letter-spacing:.26em} /* ═══════════════════════════════════════════════════════════════════════════ 12 · ENLACES · los rótulos de cada grupo «Escríbenos», «Qué hacemos…», «Míranos antes de escribir» no son titulares (el titular es el lema de arriba, que se queda en Anton): Cormorant cursiva. ═══════════════════════════════════════════════════════════════════════════ */ html[data-estetica="enlaces"] body:not(.appm) h2{font-family:var(--ae-display);font-style:italic;font-weight:600;text-transform:none;letter-spacing:0;font-size:19px;line-height:1.2} /* ═════════════════════════════════════════════════════════════════ 13 · LOS ICONOS · 4ª versión (17/10/2026, 21:40) ⚫ Bratney: «la iconografía de portafolio y de asistencia quiero la antigua, o al menos que en todo tipo de iconografía sea muy buena, detallada, pero sin perder la idea de icono; que resalte la elegancia». Al quitar la piel se fueron con ella dos cosas, y aquí se reponen SIN la piel (ni fondos, ni tarjetas, ni letra: eso sigue siendo de esta hoja): · el trazo fino y redondo de la app (Lucide) en todo ``; lo repinta aima-piel-web.js, que ahora también despierta con data-estetica; · las baldosas de grafito (aima-baldosas.js) donde el icono dice QUÉ ES algo: los canales de Asistencia y su cupón, «Qué hay aquí» de Desarrolladores, las siete tablas de Datos, el cajón de Material y la cuenta. El trazo viejo no se borra: se esconde (`.pw-baldosa > svg`). ═════════════════════════════════════════════════════════════════ */ html[data-estetica] .ic:not(.ic-marca){stroke-linejoin:round;stroke-linecap:round} /* la baldosa: tamaño y canto (lo que daba aima-piel.css), con la sombra clara de la piel web */ html[data-estetica] .ab-tile{display:inline-flex;flex:none;width:32px;height:32px;border-radius:8px;vertical-align:middle;box-shadow:0 4px 9px -5px rgba(11,11,13,.55)} html[data-estetica] .ab-tile > svg{display:block !important;width:100% !important;height:100% !important} html[data-estetica] .ab-tile.ab-20{width:20px;height:20px;border-radius:5px} html[data-estetica] .ab-tile.ab-24{width:24px;height:24px;border-radius:6px} html[data-estetica] .ab-tile.ab-26{width:26px;height:26px;border-radius:6.5px} html[data-estetica] .ab-tile.ab-36{width:36px;height:36px;border-radius:9px} html[data-estetica] .ab-tile.ab-44{width:44px;height:44px;border-radius:11px} html[data-estetica] .ab-tile.ab-48{width:48px;height:48px;border-radius:12px} html[data-estetica] .pw-baldosa > svg{display:none !important} html[data-estetica] .pw-baldosa > .ab-tile{flex:none} /* Asistencia: cada canal y el sello del cupón */ html[data-estetica] body:not(.appm) .canal .ico.pw-baldosa{width:auto;height:auto;background:none;border:0;box-shadow:none;border-radius:0;justify-self:start;place-items:start} html[data-estetica] body:not(.appm) .canal .ico.pw-baldosa::after{display:none} html[data-estetica] body:not(.appm) .cup-sello.pw-baldosa{background:none;border:0;box-shadow:none;width:auto;height:auto} html[data-estetica] body:not(.appm) .cup-sello.pw-baldosa::after{display:none} /* Entrar, y la marca de la barra de la cuenta */ html[data-estetica] body:not(.appm) .ut-ic.pw-baldosa{width:auto;height:auto;background:none !important} html[data-estetica] body:not(.appm) .mp-barra .et.pw-baldosa, html[data-estetica] body:not(.appm) .sg-barra .et.pw-baldosa{border:0;width:auto;height:auto;border-radius:0} /* Mi perfil · Mis pedidos */ html[data-estetica] body:not(.appm) .mp-ficha > h2.pw-baldosa{padding-bottom:16px} html[data-estetica] body:not(.appm) .sg-tuyo .mano.pw-baldosa{background:none;width:auto;height:auto} html[data-estetica] body:not(.appm) .sg-prod .ico.pw-baldosa{background:none !important;width:auto;height:auto;border-radius:0} /* Desarrolladores: los cuatro accesos */ html[data-estetica] body:not(.appm) .acceso__icono.pw-baldosa{background:none;border:0;border-radius:0} /* Datos: la baldosa delante del nombre de cada tabla */ html[data-estetica] body:not(.appm) .tb-cab.pw-baldosa{align-items:center;flex-wrap:wrap;gap:6px 8px} html[data-estetica] body:not(.appm) .tb-cab.pw-baldosa h3{flex:1 1 auto;white-space:nowrap;font-size:13.5px;text-align:left} /* Material: el cajón de programas */ html[data-estetica] body:not(.appm) .mu-app-ic.pw-baldosa{width:auto;height:auto;background:none;box-shadow:none;border-radius:0} html[data-estetica] body:not(.appm) .mu-app:hover .mu-app-ic.pw-baldosa{background:none} html[data-estetica] body:not(.appm) .mu-app[aria-current="true"] .mu-app-ic.pw-baldosa{background:none;box-shadow:none} html[data-estetica] body:not(.appm) .mu-app[aria-current="true"] .mu-app-ic .ab-tile{box-shadow:0 0 0 2px #C1272D,0 4px 9px -5px rgba(11,11,13,.55)}