/* ============================================================ COMANDA Β· ESTUDIO β€” V3 Cero peticiones externas. DOS tipografias, las dos alojadas en nuestro dominio: Fraunces β€” titulares y el nombre de la marca (65,7 KB) Figtree β€” todo el texto corrido (19,7 KB) πŸ”„ 20/08/2026: Figtree ENTRA Y SUSTITUYE A INTER. Motivos, medidos, no opinados: Β· pesa 19,7 KB frente a 47,3 β€” devuelve 27,6 KB Β· la misma frase ocupa un 5,7% menos de ancho, o sea menos lineas y menos pagina que bajar. Y el problema declarado de esta web es que es demasiado larga. Β· es algo mas calida, que es el registro que se busca en los textos: profesional y cercano a la vez. ⚠️ Inter no era peor: es la letra de pantalla mas segura que hay. Simplemente costaba mas por lo mismo. Por que alojadas y NO desde Google Fonts: traerlas de Google seria una peticion a un tercero, y esta pagina presume de no hacer ninguna. Ademas enviaria la IP del visitante a Google, que contradice lo que dice nuestra politica de privacidad. Las dos son SIL Open Font License: alojarlas es legal y gratis. πŸ”‘ Y el matiz: la regla NO es "usa esta letra", es "el archivo sale de nuestro dominio". Cualquier tipografia de Google Fonts vale mientras se descargue y se sirva desde aqui. ============================================================ */ @font-face{ font-family:'Figtree'; src:url('fuentes/figtree-latin.woff2') format('woff2'); font-weight:300 900; /* es variable: cubre todos los pesos */ font-style:normal; font-display:swap; /* el texto se ve ya, sin parpadeo en blanco */ } /* Fraunces β€” 20/08/2026. Titulares y el nombre de la marca. 🚨 ALOJADA EN LOCAL, como Figtree y por el mismo motivo: un a fonts.googleapis.com le manda la IP de cada visitante a Google antes de que lea una linea, y el pie de esta web dice que no te rastrea. Descargada de Google Fonts (licencia SIL OFL) y servida desde aqui: misma letra, cero peticiones a terceros. 65,7 KB. Variable de 300 a 700 y con eje optico. */ @font-face{ font-family:'Fraunces'; src:url('fuentes/fraunces-latin.woff2') format('woff2'); font-weight:300 700; font-style:normal; font-display:swap; } :root{ --paper:#f2eee6; --paper-2:#e9e3d8; --ink:#11110f; --muted:#6d6961; --line:rgba(17,17,15,.18); --accent:#d9573b; --acid:#d9ff66; --white:#fffdf8; --max:1240px; --radius:22px; --serif:'Fraunces',Georgia,'Times New Roman',serif; --sans:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; --curva:cubic-bezier(.25,.46,.45,.94); --h-cab:88px; --h-cab-min:62px; } /* LA PALETA - decidida el 18/08/2026, cerrada el 19/08/2026 ------------ GANO glowazul2 y ya no hay interruptor. Los tres atributos van fijos en el del index y estan SIEMPRE puestos: Reparten el trabajo en tres capas, y por eso siguen separados: data-oscuro -> la base oscura (invierte papel/tinta, tarjetas, cabecera y todo lo que daba por hecho el papel) data-paleta -> los colores de esta paleta concreta data-glow -> los tratamientos de luz (halos, degradados, auroras) El ?paleta= de las pruebas se quito. Si aparece en una URL vieja o en un marcador, no hace nada. Las ocho variantes que se compararon (terracota, burdeos, verde, neon, fluor y demas) se borraron del archivo. Lo que queda es lo que se pinta. Se dejan separadas las tres capas a proposito: aplastarlas a selectores sueltos ahorraria unos 5 KB y cambiaria la especificidad de ~200 reglas, que es mucho riesgo por poco byte. Si algun dia se hace, se hace midiendo. Y el motivo de que exista --sobre-acento, que no es obvio: el texto que va ENCIMA del bloque de acento (la seccion Empecemos) necesita su propio color, porque el que se lee bien sobre el fondo no se lee sobre el acento. Los valores de abajo son el respaldo por si algun dia se quitan los atributos del ; con los tres puestos, los pisan las capas. */ :root{ --sobre-acento:#2b0f09; --sobre-fluor:#11110f; } /* Los textos del bloque de acento dejan de estar clavados a un color y pasan a leer el testigo. Sin esto, cambiar la paleta deja la seccion Empecemos con el marron del terracota encima. */ html[data-paleta] .diagnostic-intro p, html[data-paleta] .diagnostic .process-list p{color:var(--sobre-acento)} html[data-paleta] .diagnostic h2 em{color:var(--sobre-acento)} /* --- La base oscura. Medida con el baremo WCAG antes de escribirla. */ /* El oscuro que pediste, pero con acento ambar en vez de neon: el neon sobre carbon es el AI tell mas repetido que hay, y ademas nos dejaria igual que MiBarOnline, que es oscuro entero. Aqui hay que invertir los testigos, no solo el fondo: el blanco pasa a ser el color de texto y las lineas se vuelven claras. */ /* Retoques que el modo oscuro necesita si o si: las tarjetas y la cabecera estaban pensadas para papel. */ /* NEGRO + NEON - 18/08/2026 ------------------------------------------- Pedido de Maxi. Se le dijo dos veces que el neon sobre carbon es el AI tell mas repetido del mercado y que MiBarOnline ya es oscuro entero; lo reafirmo, y esta es su decision. Queda escrito para que dentro de un mes nadie lo relea como un descuido. Lo que SI hay que hacer bien: la primera version daba 46 fallos de contraste porque invertir --paper y --ink no basta. Media web da por hecho el fondo de papel: los botones fluor, las tarjetas blancas de los dibujos, la cinta, el bloque de Google y el asistente. Dos acentos, para que se puedan comparar: ?paleta=neon cian #3ddce3 ?paleta=fluor verde #c9ff3d */ html[data-oscuro]{ --paper:#0d0e11; --paper-2:#15171c; --ink:#eef1f4; --muted:#98a2ad; --line:rgba(238,241,244,.17); --white:#15171c; /* las tarjetas dejan de ser blancas */ --sobre-acento:#0d0e11; --sobre-fluor:#0d0e11; /* el texto sobre fluor SIEMPRE oscuro */ } /* Los cuatro acentos, todos medidos sobre el negro #0d0e11. Descartado el violeta #9d4edd que se propuso primero: da 4,20:1, o sea que valdria para un titular pero NO para texto normal. El #b06bff es el mismo violeta un punto mas arriba y da 5,88:1. */ /* 16,41:1 */ /* 11,53:1 */ /* 6,04:1 */ /* 5,88:1 */ /* --- Lo que hay que recolocar si o si en fondo negro --------------- */ html[data-oscuro] body{background:#0d0e11} /* El boton principal era negro sobre papel: en negro desaparecia. Pasa a ser la pieza de acento, que es lo que pide este estilo. */ html[data-oscuro] .button-dark{background:var(--accent);color:#0d0e11;border-color:var(--accent)} html[data-oscuro] .button-dark:hover{background:var(--acid);color:#0d0e11} /* La cinta y las tarjetas oscuras se invertian y quedaban claras. */ html[data-oscuro] .ticker{background:#15171c;color:#eef1f4;border-color:rgba(238,241,244,.14)} html[data-oscuro] .dark-card{background:#1c1f26;color:#eef1f4} html[data-oscuro] .bento-card{background:rgba(238,241,244,.045);border-color:rgba(238,241,244,.16)}html[data-oscuro] .bento-main p,html[data-oscuro] .dark-card p{color:#a8b1bb} /* El asistente: era una tarjeta de papel sobre terracota. Ahora es una tarjeta oscura sobre un bloque de acento, con texto oscuro encima. */ html[data-oscuro] .diagnostic{color:#0d0e11} html[data-oscuro] .diagnostic h2{color:#0d0e11} html[data-oscuro] .diagnostic h2 em{color:#15171c} html[data-oscuro] .quiz{background:#0d0e11;color:#eef1f4;border-color:rgba(238,241,244,.25);box-shadow:14px 14px 0 rgba(0,0,0,.55)} html[data-oscuro] .diagnostic .process-list li{border-top-color:rgba(13,14,17,.3)} html[data-oscuro] .diagnostic-extra{border-top-color:rgba(13,14,17,.32)} /* El bloque de Google ya era oscuro; sobre negro hay que despegarlo con filo, no con sombra: una sombra oscura sobre oscuro no se ve. */ html[data-oscuro] .seo-block{background:#07080a;border:1px solid rgba(238,241,244,.14)} /* Las maquetas de movil y mapa son pantallas: se quedan claras a proposito, pero su texto tiene que dejar de leer los testigos. */ html[data-oscuro] .menu-screen, html[data-oscuro] .menu-screen, html[data-oscuro] .phone-demo{background:#f2eee6;color:#11110f}html[data-oscuro] .search-mock,html[data-oscuro] .local-mock,html[data-oscuro] .qr-stand,html[data-oscuro] .busca-caja,html[data-oscuro] .busca-resultado{background:#f7f6f3;color:#11110f} html[data-oscuro] .tabla{background:#15171c} html[data-oscuro] .cortina-panel{background:#0d0e11;color:#eef1f4} html[data-oscuro] .studio-card{background:#15171c;border-color:rgba(238,241,244,.2);box-shadow:24px 28px 0 rgba(0,0,0,.45)} html[data-oscuro] .header.encogida .menu-button>span:not(.sr-only){background:#eef1f4} html[data-oscuro] .nav{background:#0d0e11}/* --- Los dibujos son PANTALLAS, y siguen siendo claras -------------- El movil de la carta, la ficha del mapa, el atril del QR y el buscador de la cortina representan la pantalla de otra persona: si se vuelven negros dejan de leerse como lo que son. Truco: en vez de repintar treinta textos, se vuelven a declarar los TESTIGOS dentro del contenedor. Como las variables CSS heredan, todo lo de dentro recupera los valores de la version clara sin tocar ni una regla mas. */ html[data-oscuro] .menu-screen,html[data-oscuro] .menu-screen,html[data-oscuro] .phone-demo,html[data-oscuro] .search-mock,html[data-oscuro] .local-mock,html[data-oscuro] .qr-stand,html[data-oscuro] .busca-caja,html[data-oscuro] .busca-resultado,html[data-oscuro] .map-mock{ --ink:#11110f; --muted:#5c5851; --white:#fffdf8; --line:rgba(17,17,15,.18); --accent:#0f6d73; /* el neon sobre tarjeta clara no se lee */ color:#11110f; } /* La cinta del mapa y la barra de la carta son piezas oscuras DENTRO de una pantalla clara: se quedan oscuras a la fuerza. */ html[data-oscuro] .map-chip, html[data-oscuro] .map-chip, html[data-oscuro] .menu-bar{background:#11110f;color:#fffdf8} html[data-oscuro] .map-road{background:#fffdf8} /* El enlace de saltar al contenido: fondo --ink, que ahora es claro. */ html[data-oscuro] .skip{background:var(--accent);color:#0d0e11} /* La letra del pie del dibujo de Google, sobre el bloque negro. */ html[data-oscuro] .seo-pie, html[data-oscuro] .seo-pie, html[data-oscuro] .seo-pie span{color:#a8b1bb} /* --- Los ultimos que daban por hecho el fondo claro ---------------- La tarjeta de precio era negra sobre papel: en negro se fundia con el fondo y todo su texto blanco quedaba a 1,13:1. Sube un escalon de gris y se le pone filo, que sobre oscuro es lo unico que separa (una sombra oscura sobre oscuro no se ve: aprendido el 17/08). */ html[data-oscuro] .price-card{background:#1c1f26;color:#eef1f4;border:1px solid rgba(238,241,244,.16);box-shadow:18px 18px 0 var(--accent)} html[data-oscuro] .price-card>p{color:#b6bfc9} html[data-oscuro] .price-note{color:#a3acb6} html[data-oscuro] .price-rule{background:rgba(238,241,244,.2)} html[data-oscuro] .price-card dl div{border-bottom-color:rgba(238,241,244,.16)} /* La columna nuestra de la tabla: fondo de acento fluor con texto blanco encima. Sobre fluor el texto va oscuro, siempre. */ html[data-oscuro] .tabla thead .th-mine{background:var(--accent);color:#0d0e11} /* El titular del dibujo de Google y el pie de la carta. */ html[data-oscuro] .seo-visual-titulo{color:#eef1f4} html[data-oscuro] .seo-visual-titulo b{color:var(--accent)} html[data-oscuro] .menu-foot{background:#e4ded2;color:#4a463f} html[data-oscuro] .menu-foot b{color:#0f6d73} /* Las notas flotantes del hero: fondo fluor, numero incluido. */ html[data-oscuro] .floating-note span{color:#0d0e11} /* --- Dos fallos que solo salen al SCROLLEAR ------------------------ No se ven en una captura del hero: hay que bajar. Por eso el auditor pasa por la pagina entera y no por la primera pantalla. 1) La cabecera encogida se pinta oscura y pone el menu en --paper, que en modo claro es el papel. En negro, --paper ES el negro: el menu desaparecia sobre su propio fondo (1,00:1, invisible). 2) Los numeros 01-04 de los pasos leian --ink, que aqui es claro, y caian sobre el bloque fluor. */ html[data-oscuro] .header.encogida .nav a{color:#eef1f4} html[data-oscuro] .header.encogida{background:rgba(13,14,17,.94)} html[data-oscuro] .nav{background:transparent} @media (max-width:900px){html[data-oscuro] .nav{background:#0d0e11} } html[data-oscuro] .diagnostic .process-list>li>span{color:#0d0e11} html[data-oscuro] .diagnostic .process-list h3{color:#0d0e11} html[data-oscuro] .diagnostic .process-list p{color:#1c2410} html[data-oscuro] .diagnostic .pasos-titulo{color:#0d0e11} html[data-oscuro] .diagnostic-intro p{color:#1c2410} html[data-oscuro] .diagnostic-extra b{color:#0d0e11} /* GLOW - negro + degradado violeta/magenta - 18/08/2026 -------------- De una referencia que trajo Maxi: fondo casi negro, titulares y botones con degradado violeta -> magenta, y todo con halo de color detras. El efecto de "que tiene luz" no es el color: es el HALO. Un color plano no brilla; brilla cuando derrama luz sobre lo que tiene alrededor. Por eso cada pieza de acento lleva box-shadow de color, sin desplazamiento y muy difuminada. Dos correcciones medidas respecto a la referencia: 1) La referencia pone texto BLANCO sobre el boton con degradado. Blanco sobre su violeta da 5,72:1 (pasa) pero sobre su magenta da 3,89:1 (suspende). El mismo boton se lee en un extremo y no en el otro. Aqui el texto va OSCURO: 5,08 y 7,01. Pasa entero. 2) Su violeta #7b3fe4 da 3,48:1 sobre el negro: vale para un titular grande y no para texto. Se sube a #9b5cff (5,08). Y un aviso que ya estaba escrito en el estandar: el degradado DENTRO de una palabra es uno de los "AI tells" listados. Aqui se usa a proposito y solo en el hero, que es donde la referencia lo usa. Si aparece en cinco titulares mas, deja de ser un recurso. */ /* Tres variantes del mismo tratamiento. Solo cambian los colores: el halo, el vidrio y los degradados son codigo compartido. Todo medido sobre su propio fondo antes de escribirse aqui. */ /* violeta -> magenta (la referencia del evento) */ /* azul electrico -> indigo Β· 6,12 y 6,80 sobre el fondo */ /* azul profundo -> azul claro Β· 5,03 y 10,48. Mas recorrido, se ve mas "encendido" porque los dos extremos se separan mas. */ /* El azul profundo #2f7bff da 5,03:1 como RELLENO (texto oscuro encima) y 4,65:1 como TEXTO sobre el fondo: sin margen ninguno, asi que cualquier luz detras lo tumbaba. Eran dos trabajos distintos compartiendo un color. Ahora van separados: --grad el degradado, para rellenar (botones, bloques) --accent el color con el que se ESCRIBE, con margen de sobra El degradado no cambia: es el que se eligio mirandolo. */ html[data-paleta="glowazul2"]{ /* LA paleta */ --fondo-glow:#0a1220; --paper:#0a1220; --paper-2:#132340; --ink:#eaf0fa; --muted:#b0bdd1; --line:rgba(234,240,250,.18); --white:#132340; --accent:#8bb8ff; --acid:#7fc4ff; --sobre-acento:#070c16; --sobre-fluor:#070c16; --grad:linear-gradient(100deg,#2f7bff 0%,#7fc4ff 100%); --halo:0 0 26px rgba(47,123,255,.6), 0 0 64px rgba(127,196,255,.3); --halo-fuerte:0 0 34px rgba(47,123,255,.82), 0 0 92px rgba(127,196,255,.45); --luz-1:#2f7bff; --luz-2:#7fc4ff; --vidrio:rgba(10,22,44,.5); --vidrio-baja:rgba(7,15,32,.72); } html[data-glow] body{background:var(--paper)} /* --- El halo, que es lo que hace que "tenga luz" ------------------- */ html[data-glow] .button-dark, html[data-glow] .header-cta, html[data-glow] .whatsapp-float{ background:var(--grad); color:var(--fondo-glow); border-color:transparent; box-shadow:var(--halo); } html[data-glow] .button-dark:hover, html[data-glow] .header-cta:hover{ background:var(--grad); color:var(--fondo-glow); box-shadow:var(--halo-fuerte); } html[data-glow] .floating-note{background:var(--grad);color:var(--fondo-glow);border-color:transparent;box-shadow:var(--halo)} html[data-glow] .skip{background:var(--grad);color:var(--fondo-glow)} html[data-glow] .tabla thead .th-mine{background:var(--grad);color:var(--fondo-glow)} html[data-glow] .price-card{box-shadow:0 0 60px rgba(0,0,0,0), 18px 18px 0 var(--accent);box-shadow:var(--halo), 18px 18px 0 var(--accent)} /* El titular del hero con el degradado dentro de la palabra, como en la referencia. Solo aqui. Con respaldo: si el navegador no soporta background-clip:text, se queda en violeta plano y se lee igual. */ html[data-glow] .hero h1 em{color:var(--accent)} @supports (-webkit-background-clip:text) or (background-clip:text){ html[data-glow] .hero h1 em{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } } /* Las orbitas del hero ya existian como aros finos: aqui se vuelven dos manchas de luz difuminadas, que es de donde sale el ambiente. */ html[data-glow] .orbit-one, html[data-glow] .orbit-two{ border:0; border-radius:50%; filter:blur(70px); opacity:.5; } html[data-glow] .orbit-one{background:radial-gradient(circle,var(--luz-1) 0%,transparent 68%)} html[data-glow] .orbit-two{background:radial-gradient(circle,var(--luz-2) 0%,transparent 68%)} /* Filo encendido en las tarjetas: sobre negro una sombra no se ve, asi que lo que separa es el borde con luz propia. */ html[data-glow] .bento-card, html[data-glow] .studio-card, html[data-glow] .quiz{ border-color:color-mix(in srgb, var(--luz-1) 34%, transparent); box-shadow:0 0 40px color-mix(in srgb, var(--luz-1) 16%, transparent); } /* ══ EL FONDO CON LOS COLORES DE GOOGLE ══ 21/08/2026 ════════════════ 🚨 VA AQUI Y NO EN LA REGLA BASE .seo-block: esta lleva html[data-glow] delante, gana por especificidad y le clavaba #05060c. Se escribio primero abajo y no se veia nada. Si se vuelve a tocar el fondo de este bloque, es ESTA la linea que manda. Pedido por Maxi. Se le seΓ±alo que la seccion lleva escrito Β«Comanda no esta asociada a GoogleΒ» y que usar su paleta puede leerse como lo contrario; decidio seguir y queda anotado. Los cuatro tonos van MUY diluidos y fundidos en diagonal, no puros ni en el orden del logotipo: se intuyen, no se identifican. El texto se sigue apoyando en el azul oscuro de la marca. */ html[data-glow] .seo-block{ /* Solo la base. El color vive en .seo-glow, que se mueve. */ background:#0a1424; border-color:color-mix(in srgb, var(--luz-1) 30%, transparent); box-shadow:0 0 80px color-mix(in srgb, var(--luz-1) 15%, transparent)} html[data-glow] .ticker{background:var(--paper-2)} /* Los rombos de la cinta iban en --accent y se quedaban en 4,37:1 sobre el fondo de la cinta. Pasan al segundo color, que es mas claro. Son decorativos, pero un decorativo que no se ve tampoco decora. */ html[data-glow] .ticker i{color:var(--acid)} html[data-glow] .dark-card{background:var(--paper-2)} /* prefers-reduced-motion no aplica aqui (no hay movimiento nuevo), pero el halo si sube el consumo de pintado en moviles viejos: por eso va en piezas contadas y no en cada tarjeta. */ /* CABECERA DE VIDRIO - 18/08/2026 ------------------------------------- Senalado por Maxi en la referencia: la barra de arriba se ve translucida y "se ilumina". No es un color con transparencia: son tres cosas a la vez. 1. Fondo semitransparente, para que se cuele lo de detras 2. backdrop-filter: blur + saturate, que DESENFOCA lo de detras y le sube el color. Sin el saturate se ve gris y sucio: es justo lo que hace que parezca que tiene luz propia. 3. Un filo inferior con degradado, encendido en el centro La cabecera ya usaba esta tecnica, pero solo al encoger. Aqui va desde el primer momento, que es como esta en la referencia. Cuidado con dos cosas: Β· backdrop-filter no lo soporta todo: envuelto en @supports, y sin el se queda en un fondo solido que sigue funcionando. Β· Es de lo poco que cuesta pintar de verdad en un movil viejo. Va en UNA pieza fija, no en las tarjetas. */ @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){ html[data-glow] .header{ background:var(--vidrio); -webkit-backdrop-filter:blur(20px) saturate(1.6); backdrop-filter:blur(20px) saturate(1.6); border-bottom:1px solid transparent; } html[data-glow] .header.encogida{ background:var(--vidrio-baja); -webkit-backdrop-filter:blur(26px) saturate(1.7); backdrop-filter:blur(26px) saturate(1.7); } } /* Respaldo para quien no soporte el desenfoque: solido, y ya. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ html[data-glow] .header{background:var(--paper)} } /* El filo encendido: una linea de 1 px que se apaga en los bordes y brilla en el centro. Es lo que remata la sensacion de luz. */ html[data-glow] .header:after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--luz-1) 75%, transparent) 28%, color-mix(in srgb, var(--luz-2) 90%, transparent) 52%, color-mix(in srgb, var(--luz-1) 75%, transparent) 74%, transparent 100%); pointer-events:none; } /* Y el resplandor que se derrama por debajo del filo. */ html[data-glow] .header:before{ content:""; position:absolute; left:0; right:0; bottom:-26px; height:26px; background:linear-gradient(180deg, color-mix(in srgb, var(--luz-1) 20%, transparent), transparent); pointer-events:none; } /* El menu desplegado en movil tambien es vidrio, no un panel opaco. */ @media (max-width:900px){ @supports (backdrop-filter:blur(1px)){ html[data-glow] .nav{ background:var(--vidrio-baja); -webkit-backdrop-filter:blur(22px) saturate(1.6); backdrop-filter:blur(22px) saturate(1.6); } } } /* Ultimos 5 del modo glow, encontrados con el auditor que ya lee degradados. Sobre el violeta #9b5cff el limite es 4,5:1 y el verde oscuro que heredaban del fluor se quedaba en 4,10. Con el propio negro de la pagina suben a 5,08. */ html[data-glow] .diagnostic-intro p, html[data-glow] .diagnostic .section-number, html[data-glow] .diagnostic .process-list p{color:var(--fondo-glow)} /* La flecha del boton flotante seguia en blanco heredado. */ html[data-glow] .whatsapp-float b{color:var(--fondo-glow)} /* AURORAS DE FONDO - 18/08/2026 --------------------------------------- Pedido de Maxi: "aureolas delicadas que se muevan suave", y que NO oscurezcan. Tres manchas de luz enormes, muy tenues y muy lentas, por detras de todo. LA DECISION TECNICA, y es la que hace que esto se pueda publicar: NO se usa filter:blur(). Un blur de 100px sobre una capa a pantalla completa es de las cosas mas caras que puede pintar un movil, y hay que repintarla en CADA fotograma de la animacion. Un movil de 120 EUR se calienta y la pagina empieza a dar tirones. En su lugar, radial-gradient con caida suave: el degradado YA se ve difuminado, lo dibuja la GPU de una vez y moverlo no cuesta nada. Mismo resultado a la vista, sin el coste. Y solo se anima transform (translate + scale), que el navegador resuelve en su propio hilo sin volver a maquetar la pagina. Animar width, top o filter obligaria a recalcular todo en cada fotograma. Cada mancha tiene su propia duracion (48 s, 67 s, 89 s) y son numeros primos entre si a proposito: asi el conjunto no se repite igual casi nunca y no se ve el bucle. */ html[data-glow] body:before, html[data-glow] body:after, html[data-glow]:before{ content:""; position:fixed; z-index:-1; pointer-events:none; border-radius:50%; will-change:transform; } /* La grande, arriba a la izquierda, del azul profundo */ html[data-glow] body:before{ width:min(85vw,1100px); aspect-ratio:1; left:-22vw; top:-26vh; background:radial-gradient(circle closest-side, color-mix(in srgb, var(--luz-1) 42%, transparent) 0%, color-mix(in srgb, var(--luz-1) 16%, transparent) 42%, transparent 72%); animation:aurora-a 48s ease-in-out infinite alternate; } /* La del azul claro, a la derecha y mas abajo */ html[data-glow] body:after{ width:min(70vw,900px); aspect-ratio:1; right:-18vw; top:22vh; background:radial-gradient(circle closest-side, color-mix(in srgb, var(--luz-2) 34%, transparent) 0%, color-mix(in srgb, var(--luz-2) 12%, transparent) 44%, transparent 72%); animation:aurora-b 67s ease-in-out infinite alternate; } /* La tercera, tenue y baja, para que el pie no quede muerto */ html[data-glow]:before{ width:min(95vw,1300px); aspect-ratio:1.6; left:8vw; bottom:-38vh; border-radius:50%; background:radial-gradient(ellipse closest-side, color-mix(in srgb, var(--luz-1) 26%, transparent) 0%, color-mix(in srgb, var(--luz-2) 10%, transparent) 46%, transparent 74%); animation:aurora-c 89s ease-in-out infinite alternate; } @keyframes aurora-a{ from{transform:translate3d(0,0,0) scale(1)} to {transform:translate3d(9vw,7vh,0) scale(1.18)} } @keyframes aurora-b{ from{transform:translate3d(0,0,0) scale(1.1)} to {transform:translate3d(-8vw,-9vh,0) scale(.92)} } @keyframes aurora-c{ from{transform:translate3d(0,0,0) scale(1)} to {transform:translate3d(-11vw,-5vh,0) scale(1.22)} } /* Quien pide menos movimiento se queda con las manchas quietas: se sigue viendo el ambiente y no se mueve nada. No es opcional. */ @media (prefers-reduced-motion:reduce){ html[data-glow] body:before, html[data-glow] body:after, html[data-glow]:before{animation:none;will-change:auto} } /* En movil son mas pequenas y mas tenues: la pantalla es la mitad y tres manchas a pantalla completa se comen el contraste del texto. */ @media (max-width:700px){ html[data-glow] body:before{width:120vw;left:-30vw;top:-14vh;opacity:.72} html[data-glow] body:after{width:110vw;right:-34vw;top:26vh;opacity:.6} html[data-glow]:before{width:140vw;left:-20vw;bottom:-30vh;opacity:.5} } /* El bloque de Β«EmpecemosΒ» va a pantalla completa: con el degradado entero remata mejor que con un plano, y el texto oscuro pasa en los dos extremos (5,03 y 10,47). */ html[data-paleta="glowazul2"] .diagnostic{background:var(--grad)} /* Las auroras, a la intensidad que aguanta el peor punto: donde se solapan las dos. Medido antes de bajarlas, no despues. Con el nucleo al 42% el gris caia a 3,90 y el acento a 2,56. */ html[data-paleta="glowazul2"] body:before{ background:radial-gradient(circle closest-side, color-mix(in srgb, var(--luz-1) 18%, transparent) 0%, color-mix(in srgb, var(--luz-1) 8%, transparent) 44%, transparent 72%); } html[data-paleta="glowazul2"] body:after{ background:radial-gradient(circle closest-side, color-mix(in srgb, var(--luz-2) 15%, transparent) 0%, color-mix(in srgb, var(--luz-2) 6%, transparent) 46%, transparent 72%); } html[data-paleta="glowazul2"]:before{ background:radial-gradient(ellipse closest-side, color-mix(in srgb, var(--luz-1) 13%, transparent) 0%, color-mix(in srgb, var(--luz-2) 6%, transparent) 48%, transparent 74%); } *{box-sizing:border-box} /* clip y NO hidden: 'hidden' convierte html en contenedor de scroll y ROMPE position:sticky β€” la cabecera se iba con la pagina. 'clip' recorta igual lo que sobresale pero deja el pegado funcionando. */ html{scroll-behavior:smooth;overflow-x:clip} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.55;overflow-x:clip;-webkit-font-smoothing:antialiased} body.menu-open{overflow:hidden} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit} b,strong{font-weight:700} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip{position:fixed;left:1rem;top:-5rem;z-index:100;background:var(--ink);color:#fff;padding:.8rem 1rem;border-radius:8px} .skip:focus{top:1rem} /* Foco visible en todo lo que se puede tabular. La V2 no lo tenia: con teclado no se sabia donde estabas. */ a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px} /* ── Cabecera ───────────────────────────────────────────── Al bajar, ENCOGE y se vuelve solida con una sombra fina. Antes era siempre la misma barra pegada arriba, que es lo que se veia tosco: ocupaba lo mismo leyendo que en la portada. */ /* En la portada es transparente. Al bajar se vuelve OSCURA y se separa con una iluminacion, no con una raya de 1 px: la linea quedaba de plantilla gratuita. El resplandor sale del propio color de marca. */ /* 🚨 El `gap` no es cosmetico. Sin el, el grid reparte las tres columnas sin dejar aire y el menu arranca EXACTAMENTE donde termina el logo: medido, 0 px de separacion. No llegan a pisarse, pero se leen como un choque. Aparecio el 20/08 al ensanchar el logotipo con Fraunces y su letter-spacing de .18em. */ .header{height:var(--h-cab);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(1.2rem,3vw,2.6rem); padding:0 max(24px,calc((100vw - var(--max))/2));border:0; position:sticky;top:0;z-index:50;background:transparent; transition:height .45s var(--curva),background .45s var(--curva),box-shadow .45s var(--curva)} .header.encogida{height:var(--h-cab-min);background:rgba(17,17,15,.94);backdrop-filter:blur(16px) saturate(1.2); box-shadow:0 1px 0 rgba(217,255,102,.30),0 14px 34px -14px rgba(217,87,59,.55),0 4px 14px rgba(17,17,15,.25)} .header.encogida .nav a,.header.encogida .menu-button>span:not(.sr-only){color:var(--paper)} .header.encogida .menu-button>span:not(.sr-only){background:var(--paper)} .header.encogida .nav a:after{background:var(--acid)} /* ══ LA MARCA ═══════════════════════════════════════════════════════ 19/08/2026. El simbolo es imagen; **el nombre es TEXTO**. Por que, y no es capricho: Β· no pesa nada β€” la tipografia ya esta cargada para el resto de la pagina Β· se ve nitido en cualquier pantalla, no se pixela al ampliar Β· Google y un lector de pantalla leen el nombre, no un `alt` Β· afinar el espaciado es cambiar un numero, no rehacer un PNG Todo va en `em`, colgando de un solo `font-size`: cambiando ese numero se escala el bloque entero sin descuadrarse. Por eso la cabecera encoge con una sola linea. */ .marca-comanda{display:inline-flex;align-items:center;gap:.30em; font-size:26px;transition:font-size .45s var(--curva); /* 🚨 `justify-self:start` NO es un adorno. La cabecera es un grid, y un hijo de grid se estira hasta llenar su columna aunque sea inline-flex (los hijos de grid se "blockifican"). Medido: la caja del enlace media 862 px para un logo de 222 β€” **640 px muertos** que ademas pisaban el boton del precio, robandole clics. */ justify-self:start} .marca-comanda .marca-simbolo{flex:0 0 auto;width:auto;height:1.81em; transition:height .45s var(--curva)} .marca-texto{display:flex;flex-direction:column;align-items:center;line-height:1} /* πŸ”‘ El mismo `margin-right` negativo que la bajada, y por lo mismo: con .18em de espaciado sobra un hueco tras la ultima A y el nombre quedaria descentrado respecto a la bajada de debajo. */ .marca-nombre{font-family:var(--serif);font-weight:500;font-size:1em; letter-spacing:.18em;margin-right:-.18em; color:var(--ink);white-space:nowrap} /* πŸ”‘ `margin-right` NEGATIVO, no `margin-left`. El `letter-spacing` mete un hueco DESPUES de la ultima letra, asi que la caja mide mas de lo que se ve y el centrado sale corrido a la izquierda. Restando ese hueco, la caja vuelve a medir lo que se ve y el centro es el de verdad. Con `margin-left` se corrige el doble y queda peor. */ .marca-bajada{color:var(--accent);white-space:nowrap;font-weight:500; font-size:.38em;letter-spacing:.34em;margin-right:-.34em;margin-top:.30em} .header.encogida .brand{font-size:19px} .marca-pie{font-size:23px} .nav{display:flex;gap:2rem;font-size:.86rem;letter-spacing:.01em} /* 🚨 `nowrap`: sin esto, entre 1000 y 1100 px de ancho los enlaces se parten en dos lineas (Β«Que te / encuentrenΒ») y la cabecera crece. Un menu que se parte se lee como un fallo, no como una adaptacion. */ .nav a{white-space:nowrap} .nav a{position:relative} .nav a:after{content:"";position:absolute;height:1px;left:0;right:100%;bottom:-4px;background:var(--ink);transition:right .25s var(--curva)} .nav a:hover:after{right:0} /* El boton de la cabecera lleva el precio, que es el argumento. */ .header-cta{justify-self:end;display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap; background:var(--acid);color:var(--sobre-fluor);border:1px solid var(--ink);padding:.62rem 1.05rem; border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase; box-shadow:0 8px 18px -8px rgba(17,17,15,.5),0 2px 4px rgba(17,17,15,.12); transition:transform .3s var(--curva),box-shadow .3s var(--curva),background .3s,color .3s} .header-cta:hover{transform:translateY(-2px);background:var(--ink);color:var(--acid); box-shadow:0 14px 26px -10px rgba(17,17,15,.55)} .header-cta span{transition:transform .3s var(--curva)} .header-cta:hover span{transform:translate(3px,-3px)} .menu-button{display:none;background:none;border:0;width:42px;height:42px;padding:10px;cursor:pointer} .menu-button>span:not(.sr-only){display:block;height:1px;background:var(--ink);margin:5px 0;transition:.25s} .menu-button[aria-expanded="true"]>span:nth-child(1){transform:translateY(6px) rotate(45deg)} .menu-button[aria-expanded="true"]>span:nth-child(2){opacity:0} .menu-button[aria-expanded="true"]>span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* ── Hero ───────────────────────────────────────────────── */ .hero{min-height:calc(100svh - var(--h-cab));display:grid;grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);gap:5vw;align-items:center;padding:6vw max(24px,calc((100vw - var(--max))/2)) 6vw;position:relative} .eyebrow,.section-number{text-transform:uppercase;letter-spacing:.18em;font-size:.69rem;font-weight:700} /* La rayita del antetitulo. Iba solo en el hero; el 21/08 pasa a TODOS los antetitulos de seccion, a peticion de Maxi: eran el mismo elemento con dos tratamientos distintos sin motivo. */ .eyebrow,.section-number{display:flex;align-items:center;gap:.7rem} .eyebrow span,.section-number span{width:30px;height:1px;background:var(--accent); flex:0 0 auto} .hero h1,.section-head h2,.pricing h2,.diagnostic h2{font-family:var(--serif);font-size:clamp(3.2rem,5.9vw,6.8rem);line-height:.91;letter-spacing:-.055em;font-weight:400;margin:1.35rem 0 1.8rem;max-width:12ch} em{font-weight:400;font-style:italic;color:var(--accent)} .hero-lead{font-size:clamp(1rem,1.25vw,1.2rem);max-width:55ch;color:var(--muted)} /* El segundo parrafo del hero: el de Google. Va algo mas apretado contra el primero para que se lean como un bloque y no como dos ideas sueltas. El nombre del servicio en negrita porque es el unico sitio de la web donde aparece completo. */ .hero-lead-2{margin-top:.85rem} .hero-lead-2 b{color:var(--ink);font-weight:600} /* La zona, cerrando el parrafo. Va como pieza aparte y no dentro del texto: asi se lee como una firma y no como una frase mas. El antetitulo de arriba dejo de decir la zona el 20/08 para no repetirla a tres centimetros. */ .hero-zona{margin:1.1rem 0 0;font-size:.72rem;font-weight:600; letter-spacing:.20em;text-transform:uppercase;color:var(--accent)} /* ── Botones ────────────────────────────────────────────── Antes eran un rectangulo negro con letra blanca y nada mas. Ahora FLOTAN: sombra proyectada debajo, y al pasar por encima suben, la sombra crece y se tiΓ±e del color de marca. La flecha se desplaza sola, que es lo que da sensacion de que responde. */ .button{display:inline-flex;justify-content:center;align-items:center;gap:.1rem; border:1px solid transparent;padding:1.05rem 1.6rem;border-radius:999px; font-family:var(--sans);font-size:.76rem;font-weight:800;letter-spacing:.07em; text-transform:uppercase;cursor:pointer; transition:transform .32s var(--curva),box-shadow .32s var(--curva),background .32s,color .32s} .button span{transition:transform .32s var(--curva);display:inline-block} .button:hover span{transform:translate(4px,-4px)} .button-dark{background:var(--ink);color:var(--white); box-shadow:0 12px 26px -12px rgba(17,17,15,.75),0 3px 7px rgba(17,17,15,.16)} .button-dark:hover{transform:translateY(-3px);background:var(--accent); box-shadow:0 22px 40px -14px rgba(217,87,59,.6),0 5px 12px rgba(17,17,15,.18)} .hero-actions{display:flex;align-items:center;gap:1.6rem;margin-top:2.2rem;flex-wrap:wrap} .text-link{font-size:.86rem;border-bottom:1px solid var(--ink);padding:.55rem 0} .text-link span{margin-left:.5rem} .text-link.light{border-color:currentColor;display:inline-block;margin-top:1.4rem;font-weight:700} .hero-proof{font-size:.78rem;color:var(--muted);max-width:48ch;margin-top:1.6rem;border-left:2px solid var(--accent);padding-left:.9rem} .hero-proof b{color:var(--ink)} .hero-stage{position:relative;min-height:600px;display:grid;place-items:center} .studio-card{width:min(100%,590px);background:var(--white);border:1px solid var(--ink);padding:9px;border-radius:19px;box-shadow:24px 28px 0 rgba(17,17,15,.09);transform:rotate(2deg);position:relative;z-index:2} /* ══ LA CABECERA DE LAS FASES ══ 20/08/2026 ═════════════════════════ Tres arreglos que pidio Maxi, y los tres eran problemas reales: 1. La etiqueta Β«Fase 1Β» era gris y diminuta en una columna de 190 px medio vacia. Ahora el numero va en serif grande, con una linea que sale de el hacia el titular: se lee como un hito de un recorrido. 2. El titular no destacaba nada. Ahora la parte en lleva un subrayado que SE DIBUJA al entrar en pantalla. 3. La descripcion Β«estaba escrita en el aireΒ»: flotaba en la tercera columna sin nada que la sujetara. Ahora cuelga de un filete vertical, el mismo recurso que ya usa .hero-proof. */ /* πŸ”„ Tercera vuelta, y la que se queda: LOS DOS AL MISMO TAMANO. Se probo .69 contra 2.6rem (4:1) y luego .82 contra 1.65 (2:1); las dos seguian fallando. El problema no era la proporcion: era que **ninguna otra etiqueta de la web hace eso**. Ahora Β«FASE 1Β» se lee como UNA etiqueta, igual que Β«NUESTROS PLANESΒ» o Β«TRABAJOS REALESΒ», y lo unico que la distingue es que el numero va en el color de acento. */ /* πŸ”„ En FRAUNCES, no en Figtree. Es la unica etiqueta de la web que va en serif, y eso es justo lo que la separa del resto: Β«NUESTROS PLANESΒ» o Β«TRABAJOS REALESΒ» son rotulos; Β«Fase 1Β» es un hito. Sin mayusculas forzadas y con menos espaciado que las demas: en una serif el tracking ancho de las versalitas la desarma. */ /* ❌ Quitada la linea que salia del numero hacia el titular: probada el 20/08 y descartada por Maxi β€” no aportaba y ensuciaba la cabecera. */ /* ❌ Subrayado bajo el del titular: probado el 20/08 y descartado por Maxi β€” Β«queda malΒ». El ya destaca por ir en cursiva y en el color de acento; una raya encima lo cargaba. */ /* La descripcion deja de flotar: cuelga de un filete, como .hero-proof */ .section-head>p:last-child{position:relative;padding-left:1.1rem} .section-head>p:last-child:before{content:"";position:absolute;left:0;top:.35em; bottom:.35em;width:2px;border-radius:2px; background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 85%, transparent), color-mix(in srgb, var(--accent) 10%, transparent))} @media (prefers-reduced-motion:reduce){ } @media (max-width:900px){ } /* ══ LAS CUATRO PROMESAS ══ 20/08/2026 ═══════════════════════════════ Cuatro columnas a ancho completo. Es lo unico MEDIBLE de la seccion: todo lo demas son argumentos, esto son numeros que se pueden cumplir o incumplir. Por eso van destacadas y no como una lista. Como se despegan del fondo oscuro, siguiendo el estandar del 17/08: una sombra oscura sobre fondo oscuro NO se ve. Hace falta **filo claro de 1 px + halo de color + sombra honda**. Las tres. */ /* ══ BLOQUES DE SECTOR ══ 21/08/2026 ═════════════════════════════════ Misma estructura que .seo-block (tarjetas numeradas con titulo y descripcion), pero el fondo lo pone el VIDEO del rubro en vez del negro con naranja. 🚨 El naranja no se hereda a proposito: #231009 y #ef6a45 estaban clavados a mano en .seo-block y son restos de la paleta de papel y terracota, anterior al cambio del 18/08. Aqui se usan los testigos. ⚠️ El overflow:hidden vive en .sector-media, NO en .sector-block. Si estuviera en el bloque romperia position:sticky de todo lo que hubiera dentro β€” ya mordio el 17/08. */ /* La cabecera de una seccion de sector es SOLO el antetitulo: fuera el titular y la entradilla, y fuera tambien el .sector-tag que iba dentro del recuadro repitiendolo. Eran el mismo texto tres veces en pantalla. Con una sola linea de 25 px, los 4rem de aire de una cabecera normal sobran: quedaba flotando. */ .sector .section-head{margin-bottom:2.2rem} .sector .section-head .section-number{margin-bottom:0} .sector-block{position:relative;display:grid; grid-template-columns:minmax(0,1fr) .78fr;gap:clamp(2rem,4.5vw,4rem); align-items:center;border-radius:calc(var(--radius) + 6px); padding:clamp(1.8rem,3.5vw,3.2rem); border:1px solid var(--line); /* Fondo de respaldo: es lo que se ve mientras el video no existe o no ha cargado. La seccion se lee perfectamente sin el. */ background:linear-gradient(140deg,var(--paper-2),var(--paper) 70%)} /* 🚨 LA FOTO ENTRA EN LA PALETA, NO AL REVES ── 21/08/2026 ────────── La primera imagen de hosteleria era madera, cobre y luz de maΓ±ana: tono 32Β°, naranja de libro. Colada al 28% teΓ±ia el bloque entero de calido y la seccion se salia de la paleta β€” Β«volviste al negro con naranjaΒ», y era verdad aunque el CSS no tuviera un solo naranja. Se arregla con mix-blend-mode:luminosity. La imagen aporta SOLO su luz; el color lo pone el fondo azul de debajo. Resultado: la foto queda en duotono de marca. πŸ”‘ Lo importante es que esto vale para CUALQUIER foto que se ponga despues. No hay que elegir imagenes frias ni retocarlas: entran en la paleta solas. Una preocupacion menos por cliente. */ .sector-media{position:absolute;inset:0;overflow:hidden; border-radius:inherit;pointer-events:none; background:linear-gradient(140deg,#1b365e,#0a1220)} .sector-fondo{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block; /* πŸ”„ 21/08: el mix-blend-mode:luminosity SE QUITO a peticion de Maxi. Lo pusimos para meter la foto en la paleta β€”y funcionaba, medido: las zonas claras pasaban de 34Β° (naranja) a 198Β° (azul)β€” pero deja la imagen en duotono y el se veia poco natural. Lo que queda haciendo el trabajo: el velo de --paper por encima (azul muy oscuro), que enfria la foto sin desteΓ±irla, y el brightness que la oscurece. Si el naranja vuelve a molestar, la linea de abajo es la que hay que devolver: mix-blend-mode:luminosity; */ /* 🚨 Y hay que BAJARLE LA LUZ. Medido: con la foto a plena luz, sus zonas claras acababan en 105,209,255 β€” un celeste casi blanco que se comia el texto y hacia que el bloque pareciera lavado. brightness lo baja, contrast le devuelve el cuerpo para que siga leyendose como un sitio real y no como una mancha. */ filter:brightness(.7) contrast(1.18)} /* El video va ENCIMA de la imagen y solo se ve cuando de verdad tiene fotogramas. Sin archivo o con prefers-reduced-motion, se queda la imagen y la seccion se ve igual de bien. */ .sector-video{opacity:0;transition:opacity .6s var(--curva)} .sector-video[src]{opacity:1} @media (prefers-reduced-motion:reduce){.sector-video{display:none}} /* El velo. Mas denso donde va el texto y mas abierto a la derecha, para que el rubro se vea de verdad sin comerse el contraste. */ /* 🚨 MEDIDO, no estimado. Con el velo cerrado (93/86/55) el texto daba 15,30:1 de contraste y solo se veia el 10% de la foto: se estaba gastando el triple del contraste exigible en tapar justo lo que la seccion quiere enseΓ±ar. El minimo del estandar es 4,5:1. Abierto a 72/62/28. Las tarjetas ademas llevan su propio fondo translucido, asi que el velo solo tiene que proteger el antetitulo y la entradilla, no el texto de dentro de las tarjetas. ⚠️ La columna derecha NO lleva texto: es donde respira la foto. Si algun dia se escribe algo ahi, hay que volver a medir. */ .sector-velo{position:absolute;inset:0; background:linear-gradient(100deg, color-mix(in srgb, var(--paper) 42%, transparent) 0%, color-mix(in srgb, var(--paper) 32%, transparent) 42%, color-mix(in srgb, var(--paper) 12%, transparent) 100%)} .sector-copy{position:relative;z-index:1} .sector-tag{display:inline-block;font-size:.6rem;font-weight:700; text-transform:uppercase;letter-spacing:.18em;color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius:999px;padding:.3rem .75rem;margin-bottom:1.1rem} .sector-lead{font-family:var(--serif);font-size:clamp(1.15rem,1.9vw,1.5rem); line-height:1.3;letter-spacing:-.02em;color:var(--ink); margin:0 0 1.4rem;max-width:26ch} .sector-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem} /* Encendidas SIEMPRE, no solo al pasar por encima: en movil no hay raton y nadie las veria. Misma leccion que se aprendio en .seo-list. */ .sector-list li{display:grid;grid-template-columns:30px 1fr;gap:.9rem; align-items:start;padding:.75rem .9rem;border-radius:14px; border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); background:linear-gradient(180deg, color-mix(in srgb, var(--paper-2) 82%, transparent), color-mix(in srgb, var(--paper) 72%, transparent)); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(3px); transition:border-color .25s var(--curva),background .25s var(--curva), transform .25s var(--curva)} .sector-list li:hover{border-color:var(--accent);transform:translateX(5px)} .sector-list i{font-style:normal;font-size:.62rem;font-weight:700; letter-spacing:.1em;color:var(--accent);text-align:center;padding:.28rem 0; border:1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius:8px} .sector-list b{display:block;font-size:.87rem;font-weight:700; color:var(--ink);margin-bottom:.12rem} .sector-list span{font-size:.79rem;color:var(--muted);line-height:1.45} @media (max-width:900px){ /* Una columna: el video pasa a ser fondo de todo el bloque. */ .sector-block{grid-template-columns:1fr} /* En una columna el texto se apoya sobre TODA la foto, no solo sobre la mitad izquierda: aqui el velo tiene que seguir denso. */ /* Medido en 375 px: a 80/93 el contraste daba 14,25:1 y solo se veia el 14% de la foto. Abierto a 64/82: sigue muy por encima del 4,5:1 exigible y el rubro se reconoce. */ .sector-velo{background:linear-gradient(180deg, color-mix(in srgb, var(--paper) 40%, transparent), color-mix(in srgb, var(--paper) 62%, transparent))} } /* ══ PLEGABLE SOLO EN MOVIL ══ 21/08/2026 ═════════════════════════════ Medido: la misma pagina son 14,2 pantallas en escritorio y 21,3 en un movil de 375 px. Lo que alli va en columnas, aqui se apila. La prueba de que plegar funciona estaba en la propia web: la seccion de Preguntas mide 4,08 pantallas desplegada y 1,78 plegada. Ahorra 2,30 sin borrar una palabra, y en plegado se leen 97. 🚨 EL HTML VA CON `open`. Sin JavaScript la pagina se lee ENTERA. Es app.js quien los CIERRA en movil, no quien los abre. */ .plegable-movil > summary{display:none} @media (max-width:560px){ .plegable-movil{border-top:1px solid var(--line);margin-top:2rem;padding-top:.2rem} .plegable-movil > summary{display:flex;justify-content:space-between;align-items:center; gap:1rem;cursor:pointer;list-style:none;padding:1.05rem 0; font-family:var(--serif);font-size:1.22rem;line-height:1.25;color:var(--ink)} .plegable-movil > summary::-webkit-details-marker{display:none} .plegable-movil > summary:after{content:"+";font-family:var(--sans);font-weight:300; font-size:1.5rem;line-height:1;color:var(--accent); transition:transform .25s var(--curva);flex:0 0 auto} .plegable-movil[open] > summary:after{transform:rotate(45deg)} .plegable-movil > summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .plegable-movil[open] > :not(summary){margin-top:0} .plegable-movil .includes-titulo{display:none} } /* ── El plazo, donde estaban las cuatro promesas ── 21/08/2026 ──── Retirado el
    : habia DOS procesos numerados 01-04. Se queda el de la visita. Aqui solo lo medible, en una linea. Las reglas de .promesas se borraron con el. */ .price-plazo{grid-column:1/-1;margin:2.6rem 0 0;padding-top:1.5rem; border-top:1px solid var(--line); font-family:var(--serif);font-size:clamp(1.35rem,2.4vw,1.9rem); line-height:1.3;letter-spacing:-.02em;color:var(--muted)} .price-plazo b{color:var(--ink);font-weight:400} /* ── La promesa de respuesta y los extras plegados ── 20/08/2026 ──── */ .price-respuesta{display:flex;align-items:center;gap:.5rem;margin:.9rem 0 0; font-size:.78rem;font-weight:600;color:var(--accent)} .price-respuesta span{width:7px;height:7px;border-radius:50%;background:var(--acid); box-shadow:0 0 0 4px color-mix(in srgb, var(--acid) 22%, transparent);flex:0 0 auto; animation:latir 2.6s ease-in-out infinite} @keyframes latir{0%,100%{opacity:1}50%{opacity:.35}} /* Plegado a proposito: nuestros extras son pagos UNICOS, no cuotas. Un interruptor que sume al mes, como el de la competencia, aqui estaria mintiendo. */ .extras-precio{grid-column:1/-1;border-top:1px solid var(--line); margin-top:2.6rem;padding-top:1.4rem} .extras-precio summary{cursor:pointer;list-style:none;display:flex; justify-content:space-between;align-items:center;gap:1rem; font-family:var(--serif);font-size:1.3rem;color:var(--ink)} .extras-precio summary::-webkit-details-marker{display:none} .extras-precio summary span{font-family:var(--sans);font-weight:300; color:var(--accent);transition:transform .25s var(--curva)} .extras-precio[open] summary span{transform:rotate(45deg)} .extras-precio ul{list-style:none;margin:1.4rem 0 0;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem} .extras-precio li{border:1px solid var(--line);border-radius:var(--radius); padding:1rem 1.1rem;display:grid;gap:.3rem} .extras-precio li b{font-size:.92rem;color:var(--ink)} .extras-precio li i{font-style:normal;font-size:.8rem;font-weight:700; letter-spacing:.06em;text-transform:uppercase;color:var(--accent)} .extras-precio li span{font-size:.82rem;color:var(--muted);line-height:1.5} .extras-precio>p{margin:1.2rem 0 0;font-size:.82rem;color:var(--muted)} .extras-precio>p b{color:var(--ink)} @media (prefers-reduced-motion:reduce){.price-respuesta span{animation:none}} /* ══ EL TELEFONO DEL HERO ═══════════════════════════════════════════ 20/08/2026. Marco de movil, CSS puro: ni una imagen ni una peticion. Se paso de tarjeta de navegador a telefono porque el 90% entra desde el movil y porque la web se vende sobre ir bien en un movil en la calle. Ensenarlo en una ventana de escritorio contaba otra cosa. πŸ”‘ `aspect-ratio` en vez de alto fijo: el hueco lo reserva el navegador ANTES de que baje el video, asi que la pagina no pega el salto al cargar. Con alto fijo habia que acertar el numero a mano y se descuadraba en cuanto cambiaba el ancho. */ .telefono{position:relative;z-index:2;width:min(72%,272px);aspect-ratio:390/844; background:var(--paper-2);border:1px solid var(--line);border-radius:38px;padding:8px; transform:rotate(2deg); /* filo claro + halo de color + sombra honda: sobre fondo oscuro una sombra sola NO se ve, y la tarjeta se queda pegada al fondo. */ box-shadow:inset 0 0 0 1px rgba(234,240,250,.10), var(--halo), 0 34px 70px rgba(0,0,0,.55)} .telefono-isla{position:absolute;top:17px;left:50%;transform:translateX(-50%); width:31%;height:16px;background:var(--paper);border-radius:999px;z-index:3} .telefono-pantalla{width:100%;height:100%;border-radius:31px;overflow:hidden; background:var(--paper);position:relative} /* El hueco mientras no hay video. Temporal: se borra con el bloque del HTML en cuanto entre el nuevo. Se deja visible A PROPOSITO β€” un telefono en negro parece un fallo de carga; esto se lee como "falta una pieza" y evita que se publique sin darse cuenta. */ .telefono-hueco{position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:.9rem; background:radial-gradient(120% 90% at 50% 0%, var(--paper-2) 0%, var(--paper) 70%)} .telefono-hueco span{width:46px;height:46px;border-radius:50%; border:1px dashed color-mix(in srgb, var(--accent) 55%, transparent); position:relative} .telefono-hueco span:before{content:"";position:absolute;top:50%;left:54%; transform:translate(-50%,-50%);border-style:solid;border-width:9px 0 9px 14px; border-color:transparent transparent transparent var(--accent)} .telefono-hueco p{margin:0;font-size:.72rem;letter-spacing:.14em; text-transform:uppercase;color:var(--muted)} .browser-top{height:34px;display:flex;align-items:center;gap:6px;padding:0 8px;border-bottom:1px solid var(--line);font-size:.61rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)} .browser-top i{width:7px;height:7px;border-radius:50%;background:var(--ink)} .browser-top i:nth-child(2){opacity:.55} .browser-top i:nth-child(3){opacity:.2} .browser-top span{margin-left:auto} .screen-switcher{height:450px;overflow:hidden;border-radius:10px;position:relative;background:var(--paper-2)} .hero-video{width:100%;height:100%;object-fit:cover;object-position:top;display:block;background:var(--paper)} .floating-note{position:absolute;z-index:3;color:var(--sobre-fluor);background:var(--acid);border:1px solid var(--ink);padding:.75rem .9rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;box-shadow:6px 7px 0 var(--ink)} .floating-note span{font-weight:800;margin-right:.6rem} .note-one{left:-3%;top:12%;transform:rotate(-5deg)} .note-two{right:-4%;bottom:13%;transform:rotate(4deg);background:var(--accent);color:#fff} .orbit{position:absolute;border:1px solid var(--line);border-radius:50%;animation:orbit 12s linear infinite} .orbit-one{width:560px;height:560px} .orbit-two{width:420px;height:420px;animation-direction:reverse;animation-duration:8s} .orbit:before{content:"";position:absolute;width:10px;height:10px;background:var(--accent);border-radius:50%;top:50%;left:-5px} @keyframes orbit{to{transform:rotate(360deg)}} /* ── Cinta ──────────────────────────────────────────────── */ .ticker{background:var(--ink);color:var(--paper);overflow:hidden;border-block:1px solid var(--ink)} .ticker>div{width:max-content;display:flex;align-items:center;gap:1.5rem;padding:1rem 0;animation:ticker 34s linear infinite} .ticker span{font-family:var(--serif);font-size:1.3rem} .ticker i{color:var(--accent);font-style:normal} @keyframes ticker{to{transform:translateX(-50%)}} /* ── Secciones ──────────────────────────────────────────── */ .section{padding:clamp(5.5rem,10vw,10rem) max(24px,calc((100vw - var(--max))/2));border-bottom:1px solid var(--line)} /* ── Cabecera de seccion ── REHECHA EL 21/08/2026 ───────────────── Antes: 3 columnas (190px | titular | 300px) con align-items:end. El antetitulo caia en la primera columna y, al apoyarse abajo, quedaba a media altura del titular β€” Β«en el medioΒ», como lo describio Maxi. Y la columna de 190px era casi todo hueco. Ahora: el antetitulo ocupa su propia fila ARRIBA, a ancho completo, igual que el ESTUDIO WEB del hero. Debajo, titular y entradilla. De paso el titular gana los 190px que se desperdiciaban. */ .section-head{display:grid;grid-template-columns:minmax(0,1fr) 300px; gap:30px;align-items:end;margin-bottom:4rem} .section-head .section-number{grid-column:1/-1;margin:0 0 1.6rem} /* #precio y #empezar no usan .section-head: su antetitulo vive dentro de .pricing-copy y .diagnostic-intro. Se les da el mismo respiro para que los siete antetitulos de la pagina midan igual (medido: iban a 19 px del titular contra 56 de los demas). */ .pricing-copy .section-number, .diagnostic-intro .section-number{margin:0 0 3.5rem} /* El titular se apoya ARRIBA de su fila. Con align-items:end heredado, una entradilla larga empujaba el titular hacia abajo y el hueco bajo el antetitulo cambiaba de seccion a seccion (medido: 131 px en #encontrar contra 81 en las demas). La entradilla sigue abajo, que es el apoyo editorial que se buscaba. */ .section-head h2{font-size:clamp(2.8rem,5.2vw,5.8rem);margin:0;max-width:13ch; align-self:start} .section-head>p:last-child{color:var(--muted);margin:0 0 .5rem} /* JERARQUIA DE TITULARES - 18/08/2026 --------------------------------- Diagnostico de Maxi y Valentina: Β«seccion por seccion es todo lo mismo, titulos muy grandes, el cliente se va a perderΒ». Se midio y era cierto: 8 de 11 titulares entre 89 y 100 px. El problema NO era que fueran grandes: era que eran TODOS igual de grandes. Sin contraste entre ellos el ojo no sabe que importa, y entonces todo pesa lo mismo, que es lo mismo que decir que nada pesa. Tres escalones, y ninguno baja de 2.8rem (minimo del estandar): hero .............. ~100 px la unica que grita las que venden .... ~70-80 Precio, Trabajos, Empecemos las de apoyo ...... ~45-55 Que te encuentren, Que te escriban, La cuenta, Preguntas */ .projects .section-head h2{font-size:clamp(3.4rem,5vw,4.9rem)} .service .section-head h2, .numbers .section-head h2, .faq .section-head h2{font-size:clamp(2.8rem,3.4vw,3.4rem);max-width:16ch} /* EL PLEGABLE --------------------------------------------------------- Hermano del FAQ, con el mismo gesto del + que gira, porque ese ya demostro que funciona: la seccion de preguntas tiene 604 palabras escritas y solo cuesta 99 de alto, justo por ir plegada. Los argumentos largos no se borran, se guardan: son lo que nos separa de MiBarOnline, que no tiene ninguno. Lo que cansa no es que existan, es que te los impongan. Y lo de dentro va en el HTML desde el primer byte: Google lo lee igual con el plegable cerrado. */ .plegable{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);margin:2.6rem 0 0} .plegable summary{list-style:none;cursor:pointer;padding:1.25rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:var(--serif);font-size:1.35rem;line-height:1.15} .plegable summary::-webkit-details-marker{display:none} .plegable summary span{font-family:var(--sans);font-weight:300;font-size:1.5rem;color:var(--accent);transition:transform .25s var(--curva)} .plegable[open] summary span{transform:rotate(45deg)} .plegable>*:not(summary):last-child{margin-bottom:1.7rem} .plegable .includes{margin-top:0;padding-top:0;border-top:0} .plegable .menu-note{margin-top:0} .plegable summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px} /* ── 02 Β· Trabajos ──────────────────────────────────────── */ .projects{background:var(--paper-2)} .project-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:1.2rem;align-items:start} .project-card{border-top:1px solid var(--ink);padding-top:1rem;display:block} .project-card:nth-child(2){margin-top:11rem} .project-image{height:330px;overflow:hidden;background:#d8d2c6} .project-card:nth-child(2) .project-image{height:330px} .project-image img,.project-video{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .75s var(--curva)} .project-card:hover .project-image img,.project-card:hover .project-video{transform:scale(1.03)} .project-image{box-shadow:0 18px 40px -22px rgba(17,17,15,.55)} .project-meta{display:grid;grid-template-columns:1fr 1fr auto;gap:1.5rem;padding:1.4rem 0;align-items:start} .project-meta span{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)} .project-meta h3{font-family:var(--serif);font-size:2rem;margin:.2rem 0;font-weight:400;white-space:nowrap} .project-meta p{color:var(--muted);font-size:.88rem;margin:.2rem 0} .round-arrow{width:42px;height:42px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:1rem;transition:.25s} .project-card:hover .round-arrow{background:var(--ink);color:#fff;transform:rotate(45deg)} .projects-note{margin:4rem 0 0;padding-top:1.6rem;border-top:1px solid var(--line);color:var(--muted);max-width:70ch}/* ── 03 Β· QuΓ© lleva ─────────────────────────────────────── */ .service .section-head,.faq .section-head,.numbers .section-head{grid-template-columns:minmax(0,1fr) 300px} .bento{display:grid;grid-template-columns:1.15fr .85fr .85fr;grid-auto-rows:minmax(270px,auto);gap:1rem} .bento-card{border:1px solid var(--ink);border-radius:var(--radius);padding:1.5rem;display:flex;flex-direction:column;position:relative;overflow:hidden;background:rgba(255,255,255,.12)} .bento-card h3{font-family:var(--serif);font-size:1.6rem;margin:auto 0 .4rem;line-height:1.05;font-weight:400} .bento-card p{font-size:.85rem;color:var(--muted);margin:0;max-width:42ch} .bento-index{font-size:.67rem;font-weight:700} .bento-main{grid-row:span 2;justify-content:end;background:var(--ink);color:#fff} .bento-main p,.dark-card p{color:#b9b6af} .dark-card{background:var(--ink);color:#fff} .accent-card{background:var(--accent);color:#fff} .accent-card p{color:#ffe3db} .phone-demo{width:190px;height:330px;background:var(--paper);border:1px solid #fff;border-radius:25px;padding:12px;position:absolute;right:-20px;top:35px;transform:rotate(7deg);box-shadow:0 20px 60px #000} .phone-bar{height:10px;width:50px;background:var(--ink);border-radius:10px;margin:0 auto 12px} .phone-hero{height:125px;border-radius:12px;background:linear-gradient(135deg,#e8a98f,#fff 55%,#afb96f)} .phone-lines{display:grid;gap:8px;margin:15px 3px} .phone-lines i{height:6px;background:#c8c0b5;border-radius:4px} .phone-lines i:nth-child(2){width:70%} .phone-lines i:nth-child(3){width:85%} .phone-button{background:#1f9e5a;color:#fff;text-align:center;padding:10px;border-radius:10px;font-size:.65rem;font-weight:700} .wa-bubble{background:#fff;color:#11110f;padding:1rem;border-radius:16px 16px 3px 16px;transform:rotate(-3deg);margin:auto 0;box-shadow:7px 7px 0 var(--ink);font-family:var(--serif)} .mini-list{display:grid;gap:.45rem;margin:auto 0} .mini-list i{font-style:normal;font-size:.74rem;border-bottom:1px solid var(--line);padding:.55rem 0} .mini-list i:before{content:"βœ“";margin-right:.5rem;color:var(--accent)} .ownership{font-family:var(--serif);font-size:3.2rem;line-height:.78;text-align:right;margin:auto 0;color:var(--acid)} .includes{list-style:none;margin:2.5rem 0 0;padding:1.8rem 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:.6rem 2rem} .includes li{font-size:.85rem;color:var(--muted);padding-left:1.4rem;position:relative} .includes li:before{content:"βœ“";position:absolute;left:0;color:var(--accent);font-weight:700} /* ── 04 Β· Precio ────────────────────────────────────────── */ .pricing{display:grid;grid-template-columns:1fr 470px;gap:7vw;align-items:center} .pricing h2{font-size:clamp(3.4rem,5vw,4.9rem);margin:1.2rem 0 1.8rem} .pricing-copy>p:not(.section-number){color:var(--muted);max-width:56ch} .pricing-copy ul{list-style:none;padding:0;margin:2rem 0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem} .pricing-copy li{font-size:.86rem} .pricing-copy li span{color:var(--accent);margin-right:.5rem} .pricing-aside{font-family:var(--serif);font-size:1.25rem;color:var(--ink)!important;border-left:2px solid var(--accent);padding-left:1rem} .price-card{background:var(--ink);color:#fff;border-radius:var(--radius);padding:1.7rem;box-shadow:18px 18px 0 var(--accent)} .price-top{display:flex;justify-content:space-between;text-transform:uppercase;font-size:.65rem;letter-spacing:.1em} .price-top b{color:var(--acid)} .price{display:flex;align-items:flex-start;margin:2.8rem 0 0} .price strong{font-family:var(--serif);font-size:8rem;line-height:.7;font-weight:400;letter-spacing:-.08em} .price>div{display:flex;flex-direction:column;margin-left:.6rem} .price>div span{font-size:2rem} .price>div small{color:#aaa69f} .price-card>p{color:#aaa69f} .price-rule{height:1px;background:#44413d;margin:2rem 0} .price-card dl{margin:0 0 2rem} .price-card dl div{display:flex;justify-content:space-between;border-bottom:1px solid #383632;padding:.75rem 0} .price-card dt,.price-card dd{font-size:.8rem} .price-card dd{margin:0;font-weight:700} .price-card .button{width:100%} .price-note{display:block;text-align:center;color:#8d8982;margin-top:1rem} .alternative{grid-column:1/-1;border-top:1px solid var(--line);margin-top:3.5rem;padding-top:1.6rem;display:grid;grid-template-columns:1fr 1fr;gap:2.5rem} .alternative span{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:.5rem} .alternative p{margin:0;color:var(--muted);font-size:.88rem;max-width:48ch} .alternative b{color:var(--ink)} /* ── 05 Β· Las cuentas ───────────────────────────────────── */ .numbers{background:var(--paper-2)} /* La tabla se desliza dentro de su caja, nunca empuja la pagina. En movil se avisa de que hay mas a la derecha y se pone un degradado en el borde: sin eso parece una tabla cortada. */ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:1.2rem;position:relative} .table-hint{display:none;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:700;margin:0 0 .6rem} .tabla{width:100%;min-width:560px;border-collapse:collapse;font-size:.88rem;background:var(--white)} .tabla-4{min-width:820px} /* La nota va FUERA de la caja que se desliza: dentro se cortaba en movil, porque heredaba el ancho minimo de la tabla. */ .tabla-nota{color:var(--muted);font-size:.76rem;max-width:80ch;margin:.9rem 0 1.6rem} .tabla th,.tabla td{padding:.95rem 1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top} .tabla thead th{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;background:var(--ink);color:var(--paper);border-bottom:0} .tabla thead .th-mine{background:var(--accent);color:#fff} .tabla tbody th{font-weight:400;color:var(--muted);width:30%} .tabla .mine{background:rgba(217,87,59,.07);font-weight:700} .tabla .tr-total th,.tabla .tr-total td{border-bottom:0;border-top:2px solid var(--ink);font-weight:700} .tabla .tr-total th{color:var(--ink)} .numbers-note{color:var(--muted);max-width:75ch;margin:0 0 4.5rem} .numbers-note b{color:var(--ink)} .numbers-note:last-child{margin-bottom:0} /* ── 06 Β· Proceso ───────────────────────────────────────── */ .process-list{list-style:none;margin:0;padding:0} .process-list li{display:grid;grid-template-columns:190px 1fr;border-top:1px solid rgba(255,255,255,.25);padding:2rem 0;transition:.25s} .process-list li:hover{padding-left:1rem;background:rgba(255,255,255,.035)} .process-list>li>span{font-size:.7rem;color:var(--accent)} .process-list div{display:grid;grid-template-columns:.8fr 1fr;align-items:start;gap:1.5rem} .process-list h3{font-family:var(--serif);font-size:2.2rem;margin:0;font-weight:400} .process-list p{margin:.4rem 0;color:#aaa69f;max-width:46ch} /* ── 08 Β· Asistente ─────────────────────────────────────── */ .diagnostic{background:var(--accent);display:grid;grid-template-columns:.85fr 1.15fr;gap:7vw;align-items:start;color:var(--white)} .diagnostic h2{font-size:clamp(3.4rem,5vw,4.9rem);margin:1.2rem 0 1.5rem;color:var(--white)} .diagnostic h2 em{color:var(--ink);font-style:italic} /* 🚨 Era #5a2419 y daba 3,16:1 sobre el terracota β€” suspendia el minimo de 4,5:1 y era el UNICO punto de la web que lo hacia. Medido el 17/08/2026. El marron nuevo es el mismo tono, mas hondo. */ .diagnostic-intro p{max-width:46ch;color:#2b0f09} .diagnostic-extra{border-top:1px solid rgba(255,255,255,.35);padding-top:1.3rem;margin-top:1.8rem} .diagnostic-extra b{color:var(--white)} /* LOS 4 PASOS, DENTRO DE Β«EMPECEMOSΒ» - 18/08/2026 --------------------- Era la seccion Β«Como trabajamosΒ», con su fondo negro y su titular de 100 px. Ahora vive sobre la terracota, a ancho completo y debajo del asistente: los pasos solo le interesan al que YA se esta decidiendo, y contestan «¿y como funciona esto?Β» justo donde aparece la duda. Los colores se reajustan al fondo claro: el #2b0f09 es el que se audito el 17/08 y da 4,58:1 sobre terracota. */ .diagnostic .pasos-titulo,.diagnostic .process-list{grid-column:1/-1} .diagnostic .pasos-titulo{font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.12;letter-spacing:-.035em;color:var(--white);max-width:26ch;margin:clamp(3.5rem,6vw,5.5rem) 0 .4rem} .diagnostic .process-list li{border-top:1px solid rgba(255,255,255,.42)} .diagnostic .process-list>li>span{color:var(--ink)} .diagnostic .process-list h3{color:var(--white)} .diagnostic .process-list p{color:#2b0f09} .diagnostic .process-list li:hover{background:rgba(255,255,255,.1)} .quiz{background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-radius:var(--radius);padding:2rem;min-height:495px;box-shadow:14px 14px 0 var(--ink)} .quiz-progress{height:3px;background:#d4cec3;margin-bottom:3.5rem} .quiz-progress i{display:block;height:100%;width:25%;background:var(--accent);transition:width .35s} .quiz-step{display:none} .quiz-step.active{display:block;animation:stepIn .35s ease both} @keyframes stepIn{from{opacity:0;transform:translateY(9px)}} .quiz-count{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)} .quiz h3{font-family:var(--serif);font-size:2.35rem;line-height:1;margin:1rem 0 2rem;max-width:16ch;font-weight:400} .quiz-options{display:grid;gap:.65rem} .quiz-options button{background:transparent;border:1px solid var(--line);padding:1rem;text-align:left;display:flex;justify-content:space-between;gap:1rem;cursor:pointer;border-radius:10px;transition:.2s} .quiz-options button:hover{background:var(--ink);color:#fff;border-color:var(--ink);padding-left:1.25rem} .quiz-back,.quiz-restart{border:0;background:transparent;text-decoration:underline;cursor:pointer;margin-top:1.2rem;font-size:.78rem;color:var(--muted)} /* pre-line: el mensaje lleva saltos de lΓ­nea de verdad y hay que respetarlos */ .quiz-result p{color:var(--muted);margin-bottom:2rem;max-width:48ch;font-style:italic;border-left:2px solid var(--accent);padding-left:1rem;white-space:pre-line} .quiz-result .button{margin-right:1rem} /* ── 09 Β· Preguntas ─────────────────────────────────────── */ .faq-list{margin-left:190px} .faq details{border-top:1px solid var(--ink)} .faq details:last-child{border-bottom:1px solid var(--ink)} .faq summary{list-style:none;cursor:pointer;padding:1.4rem 0;display:flex;justify-content:space-between;gap:1rem;font-family:var(--serif);font-size:1.5rem} .faq summary::-webkit-details-marker{display:none} .faq summary span{font-family:var(--sans);font-weight:300;transition:.25s} .faq details[open] summary span{transform:rotate(45deg)} .faq details p{max-width:70ch;color:var(--muted);padding:0 0 1.6rem;margin:0} .faq details p b{color:var(--ink)} /* ── Pie ───────────────────────────────────────── */ .footer{padding:4rem max(24px,calc((100vw - var(--max))/2)) 2rem;display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem} .footer img{height:42px;width:auto} .footer p,.footer a{font-size:.8rem;color:var(--muted)} .footer>div:first-child p{max-width:44ch;margin:.4rem 0 0} .footer>div{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem} /* El :not() no es adorno: esta regla es para las etiquetas del pie (Β«HablamosΒ», Β«EjemplosΒ») y se estaba comiendo el logo, que ahora tambien es un hijo directo. `.footer>div>span` pesa mas que `.marca-pie` y le clavaba 10,4 px de tamaΓ±o: el bloque entero se quedaba en 19 px de alto en vez de 42. */ /* 🚨 El :not() se escribio cuando la clase .marca-comanda iba en el . El 21/08 el logo del pie paso a compartir las clases del de la cabecera y esa clase se mudo al
    : el guardia dejo de proteger, la regla cayo sobre .marca-texto y le encogia el nombre a 10,4 px con un uppercase encima. Ahora se excluye tambien .marca-texto. */ .footer>div>span:not(.marca-comanda):not(.marca-texto){text-transform:uppercase;letter-spacing:.12em;font-size:.65rem;margin-bottom:.4rem;color:var(--ink)} .footer a:hover{color:var(--ink);text-decoration:underline} .footer-sectores{grid-column:1/-1;border-top:1px solid var(--line);padding-top:1.4rem;margin:2rem 0 0;font-size:.72rem!important;line-height:1.9} .footer-bottom{grid-column:1/-1;border-top:1px solid var(--line);padding-top:1.2rem;margin:1.2rem 0 0} .footer-bottom a{text-decoration:underline} .footer-bottom small{display:block;margin-top:.5rem;font-size:.72rem} /* πŸ”„ 21/08/2026: el flotante llevaba la palabra Β«WhatsAppΒ» y una flecha. Ahora lleva el logo de WhatsApp y nada mas: el icono se reconoce sin leer, y en un movil ocupa la mitad. La palabra sigue ahi para los lectores de pantalla, en .sr-only. */ .whatsapp-float{position:fixed;right:20px;bottom:20px;z-index:40; width:58px;height:58px;border-radius:50%; display:grid;place-items:center; color:var(--fondo-glow);background:var(--acid); border:1px solid transparent; box-shadow:var(--halo); transition:transform .3s var(--curva),box-shadow .3s var(--curva)} .whatsapp-float:hover{transform:translateY(-3px) scale(1.04)} .whatsapp-float svg{display:block} .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)} .reveal.visible{opacity:1;transform:none} /* ── Pantallas medianas ─────────────────────────────────── */ /* πŸ”„ 20/08: de 1000 a 1120 px. Con el logotipo en Fraunces y su letter-spacing de .18em, la marca es mas ancha que antes y el menu dejaba de caber ANTES de llegar a los 1000. El punto de corte se mide con el contenido puesto, no se hereda de la version anterior. */ @media (max-width:1120px){ .header{grid-template-columns:1fr auto} .header-cta{display:none} .menu-button{display:block;justify-self:end} .nav{position:fixed;inset:var(--h-cab) 0 auto;transition:top .45s var(--curva);background:var(--paper);border-bottom:1px solid var(--ink);padding:2rem 24px;display:none;flex-direction:column;font-family:var(--serif);font-size:1.8rem} .nav.open{display:flex} .header.encogida .nav{top:var(--h-cab-min)} .hero{grid-template-columns:1fr;padding-top:4rem} .hero-stage{min-height:540px} .studio-card{max-width:650px}.section-head,.service .section-head,.faq .section-head,.numbers .section-head{grid-template-columns:1fr} .project-grid{grid-template-columns:1fr} .project-card:nth-child(2){margin-top:4rem} .bento{grid-template-columns:1fr 1fr} .pricing{grid-template-columns:1fr} .alternative{grid-template-columns:1fr;gap:1.5rem} .diagnostic{grid-template-columns:1fr} .faq-list{margin-left:0} } /* ── MΓ³vil ──────────────────────────────────────────────── */ @media (max-width:680px){ :root{--h-cab:74px;--h-cab-min:58px} .header{padding:0 18px} .brand img{height:39px} .hero{min-height:auto;padding:3.5rem 20px 5rem} .hero-copy,.hero-stage{min-width:0;width:100%} .hero h1{font-size:clamp(3rem,17vw,4.6rem);max-width:100%} .hero-stage{min-height:390px} .studio-card{transform:rotate(1deg);padding:6px;box-shadow:12px 14px 0 rgba(17,17,15,.09)} /* En un movil de verdad, un telefono girado dentro de la pantalla se lee como un fallo. Se pone recto y algo mas pequeno. */ .telefono{transform:none;width:min(62%,214px);border-radius:32px} .telefono-pantalla{border-radius:26px} .telefono-isla{height:13px;top:14px} .screen-switcher{height:300px} .orbit-one{width:390px;height:390px} .orbit-two{width:280px;height:280px} .floating-note{font-size:.56rem} .note-one{left:-2%;top:7%} .note-two{right:0;bottom:3%} .section{padding:5rem 20px} .section-head{margin-bottom:2.5rem}.project-image,.project-card:nth-child(2) .project-image{height:240px} .project-meta{grid-template-columns:1fr auto} .project-meta p{grid-column:1/-1} .project-meta .round-arrow{grid-column:2;grid-row:1} .bento{grid-template-columns:1fr} .bento-main{min-height:520px;grid-row:auto} .bento-card{min-height:260px} .includes{grid-template-columns:1fr} .pricing-copy ul{grid-template-columns:1fr} .price-card{padding:1.35rem;box-shadow:9px 10px 0 var(--accent)} .price strong{font-size:6rem} .tabla{font-size:.8rem} .tabla th,.tabla td{padding:.75rem} .table-hint{display:block} .process-list li{grid-template-columns:55px 1fr} .process-list div{grid-template-columns:1fr;gap:0} .process-list h3{font-size:1.8rem} .quiz{padding:1.35rem;box-shadow:8px 8px 0 var(--ink);min-height:520px} .quiz h3{font-size:2rem} .quiz-result .button{width:100%;margin:0} .faq summary{font-size:1.2rem} .footer{grid-template-columns:1fr 1fr} .footer>div:first-child{grid-column:1/-1} .whatsapp-float span{display:none} .whatsapp-float{padding:.6rem} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} /* La cortina no se ensena. Antes esto solo lo hacia app.js; si el JS no corre, quien pidio menos movimiento se comia la escena entera. */ .cortina{display:none} .ticker>div,.orbit{animation:none} .reveal{opacity:1;transform:none;transition:none} .button:hover,.process-list li:hover{transform:none} .qr-stand:hover,.menu-phone:hover{transform:rotate(-3deg)} /* El bloque de Google se queda quieto: el buscador escrito entero, el radar apagado y las estrellas puestas. Se entiende igual. */ .seo-block:before,.seo-glow:before,.seo-glow:after,.pin:before,.pin:after{animation:none} .search-text{animation:none;width:16.5ch;border-right-color:transparent} .stars i{animation:none;opacity:1} .seo-list li:hover,.bento-card:hover{transform:none} /* Nada entra ni se destapa: todo puesto desde el principio. Los numeros se quedan escritos tal cual (app.js no los cuenta). */ .hero-copy>*,.hero h1{animation:none} .reveal h2,.reveal.visible h2{clip-path:none;transition:none} body{transition:none} } /* ══ LA CORTINA DE ENTRADA ═════════════════════════════════════════════ Fondo papel liso, del mismo color que la web. El fondo de estrellas que tuvo al principio se descarto: se veia como adorno y no como continuidad con la pagina. Tiempos: 0,75 s quieta y 0,8 s apartandose. Total 1,55 s. Es corto a proposito β€” una entrada larga deja de ser una entrada y se convierte en un peaje. */ /* πŸ”‘ La perspectiva va aqui, en el contenedor fijo β€” NUNCA en el body ni en un ancestro comun: si un ancestro tiene perspective, todos los position:fixed de la pagina dejan de funcionar (se romperia el boton flotante de WhatsApp y la cabecera). */ .cortina{position:fixed;inset:0;z-index:200;perspective:1200px;cursor:pointer; animation:cortina-off 0s linear 3s forwards} /* 🚨 ESTA ANIMACION DE 0s ES UNA RED DE SEGURIDAD, NO UN ADORNO. Medido el 19/08/2026, y era un fallo de verdad: El panel se aparta con `cortina-fuera`, pero .cortina es el contenedor fijo β€” ocupa la pantalla entera con z-index 200 β€” y NO se movia solo. Quien lo quitaba era el `removeChild` de app.js. O sea que si el JS no llegaba a correr (un error, un bloqueador, el archivo que no baja), el visitante veia la pagina perfecta DEBAJO y no podia pulsar nada: ni el menu, ni el precio, ni el boton de WhatsApp. Comprobado con elementFromPoint sobre el boton de WhatsApp: devolvia "cortina". Y va justo contra la regla que no se negocia: si el JavaScript falla, la pagina se lee entera y los botones funcionan. Ahora se aparta sola con CSS a los 3 s (2,15 de espera + 0,85 de animacion del panel), corra el JS o no. El removeChild del JS sigue estando y es el camino normal; esto es el paracaidas. */ @keyframes cortina-off{to{visibility:hidden;pointer-events:none}} /* Fondo PAPEL, del mismo color que la web. Cuando el panel se abre no hay salto de color: parece que la busqueda cargo la pagina de verdad. Esa continuidad es la mitad del truco. */ .cortina-panel{position:absolute;inset:0;background:var(--paper);color:var(--ink); display:grid;place-items:center;padding:24px;overflow:hidden; transform-style:preserve-3d;transform-origin:50% 0; animation:cortina-fuera .85s var(--curva) 2.15s forwards} .cortina-dentro{position:relative;z-index:1;width:min(92vw,620px); display:flex;flex-direction:column;align-items:stretch;text-align:left} /* ── La caja de busqueda ─────────────────────────────────────────── */ .busca-caja{background:var(--white);border:1px solid var(--line);border-radius:999px; padding:.95rem 1.4rem;display:flex;align-items:center;gap:.85rem; box-shadow:0 22px 45px -26px rgba(17,17,15,.5); animation:cortina-texto .55s var(--curva) both} .busca-texto{font-size:clamp(.9rem,2.3vw,1.05rem);color:var(--muted);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .busca-texto b{color:var(--ink);font-weight:700} .caret{display:inline-block;width:1.5px;height:1.05em;background:var(--accent); vertical-align:-.16em;margin-left:1px;animation:parpadeo .75s step-end infinite} @keyframes parpadeo{50%{opacity:0}} /* ── El resultado, con la pinta de un resultado de busqueda ──────── */ .busca-resultado{margin:1.1rem 0 0;padding:1rem 1.2rem;border-radius:16px; background:var(--white);border:1px solid var(--line); display:flex;flex-direction:column;gap:.28rem; opacity:0;transform:translateY(10px);transition:opacity .4s var(--curva),transform .4s var(--curva),box-shadow .2s} .busca-resultado.visible{opacity:1;transform:none} /* El destello del clic: se ilumina un instante, como cuando pulsas */ .busca-resultado.pulsado{box-shadow:0 0 0 3px rgba(217,87,59,.35);transform:translateY(1px)} .res-url{font-size:.7rem;color:var(--muted);letter-spacing:.02em} .res-titulo{font-family:var(--serif);font-size:clamp(1rem,2.6vw,1.25rem);color:var(--accent);line-height:1.2} .res-desc{font-size:.79rem;color:var(--muted);line-height:1.45} /* ── El puntero que hace el clic ─────────────────────────────────── */ .puntero{position:absolute;left:58%;top:120%;width:15px;height:15px; border-radius:50% 50% 50% 2px;background:var(--ink);border:2px solid var(--white); transform:rotate(-32deg);opacity:0;pointer-events:none; transition:top .5s var(--curva),left .5s var(--curva),opacity .3s,scale .12s} .puntero.entra{opacity:1;top:76%;left:34%} .puntero.clic{scale:.72} @keyframes cortina-texto{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} /* Se abre hacia arriba alejandose. No es un fundido: un fundido se lee como un fallo, una compuerta se lee como una entrada. */ @keyframes cortina-fuera{ to{transform:rotateX(78deg) translateZ(160px);opacity:0;visibility:hidden}} /* ══ ENTRADA Y MÁSCARAS ════════════════════════════════════════════════ Los dos efectos que mas Β«caroΒ» hacen parecer una pagina, y los dos son CSS puro. Robados de dos videos de diseno el 17/08. 🚫 Lo que NO se copio de esos videos: la pantalla de carga. Un loader ANADE tiempo, y el argumento entero de esta pagina es que abre en milisegundos. No se decora la velocidad: se ensena. */ /* ── 1. El hero entra escalonado ──────────────────────────────────── Sin esperar a nada: arranca con la pagina. Cada hijo sale 90 ms despues del anterior, que es lo justo para que se lea como una secuencia y no como un parpadeo. */ .hero-copy>*{animation:entrar .8s var(--curva) both} .hero-copy>*:nth-child(1){animation-delay:.04s} .hero-copy>*:nth-child(2){animation-delay:.13s} .hero-copy>*:nth-child(3){animation-delay:.22s} .hero-copy>*:nth-child(4){animation-delay:.31s} .hero-copy>*:nth-child(5){animation-delay:.40s} .hero-copy>*:nth-child(6){animation-delay:.49s} @keyframes entrar{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} /* El h1 ademas se revela por debajo de una mascara, como si lo destaparan. Son dos animaciones a la vez porque tocan propiedades distintas: una la opacidad y el desplazamiento, otra el recorte. */ .hero h1{animation:entrar .8s var(--curva) .13s both,destapar 1.05s var(--curva) .13s both} @keyframes destapar{from{clip-path:inset(0 0 102% 0)}to{clip-path:inset(0 0 -22% 0)}} /* ── 2. Los titulares de seccion, tambien con mascara ─────────────── Se destapan cuando su bloque .reveal entra en pantalla, asi que reutiliza el observador que ya existia. Cero JS nuevo. */ .reveal h2{clip-path:inset(0 0 102% 0);transition:clip-path 1s var(--curva) .12s} .reveal.visible h2{clip-path:inset(0 0 -22% 0)} /* ── 3. Los numeros que cuentan ───────────────────────────────────── Las cifras cambian de ancho al contar (9 es mas ancho que 1) y la tabla temblaba. tabular-nums da a todos los digitos el mismo ancho. */ [data-contar]{font-variant-numeric:tabular-nums} /* ══ PROFUNDIDAD Y CRECIMIENTO AL BAJAR ════════════════════════════════ Los dos efectos que pidio Maxi el 17/08: capas a distinta profundidad en el hero, y la imagen que se agranda al pasar por ella. Van con animation-timeline, que ata la animacion al SCROLL en vez de al reloj. Cero JavaScript: lo mueve el navegador en su propio hilo, asi que no da tirones ni en un movil barato β€” que es justo donde fallan las versiones hechas con librerias. πŸ”‘ Se anima `translate` y `scale`, NO `transform`. Son propiedades independientes, asi que no pisan el `transform:rotate()` que ya tienen la tarjeta y las notas. Si se hiciera con transform, al animarlas se perderia la inclinacion. El @supports es la red: donde no exista, no pasa nada β€” las capas se quedan quietas y la imagen en su tamano normal. No se rompe. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { /* ── Hero: tres profundidades ────────────────────────────────── Cuanto mas Β«cercaΒ» esta la capa, mas se desplaza. Las notas van delante (z-index 3), la tarjeta en medio, el texto al fondo. */ .hero-copy, .studio-card, .note-one, .note-two{ animation:capa linear both; animation-timeline:view(); animation-range:cover 0% cover 100%; } .hero-copy {--viaje:-24px} /* fondo, apenas se mueve */ .studio-card{--viaje:-58px} /* medio */ .note-one {--viaje:-98px} /* frente */ .note-two {--viaje:-112px} /* frente, un poco mas */ /* ── La etiqueta de fase entra con el scroll ────────────────── Pedido de Maxi. Va atada al SCROLL, no a un temporizador: si subes, se deshace; si bajas, se hace. Se siente como algo que responde a tu dedo y no como una animacion que se dispara sola. πŸ”‘ Se anima `opacity` y `translate` (no `transform`): son propiedades independientes, asi no pisan nada de lo que pueda llevar el elemento. Y las dos las resuelve la GPU. */ /* ── Trabajos: la imagen crece al pasar por ella ─────────────── Encaja en hosteleria: el que mira tiene hambre y la foto grande hace el trabajo sola. El contenedor tiene overflow:hidden, asi que crece por dentro del marco y no descoloca nada. */ .project-image img, .project-video{ animation:crecer linear both; animation-timeline:view(); animation-range:entry 0% cover 65%; } } } @keyframes entra-fase{ from{opacity:0;translate:0 14px} to{opacity:1;translate:0 0} } @keyframes capa{from{translate:0 0}to{translate:0 var(--viaje,-40px)}} @keyframes crecer{from{scale:1}to{scale:1.14}} /* ══ 03 Β· EL BLOQUE DE GOOGLE ══════════════════════════════════════════ La pieza mas llamativa de la pagina, y a proposito: para un negocio local, Β«que me encuentrenΒ» es EL dolor. Todo dibujado con CSS β€” ni una imagen, ni una peticion. 🚨 Nada aqui imita la marca de Google: no hay logo, ni su tipografia, ni sus colores. Es un buscador generico con nuestra paleta. Se habla de Google en el texto, que es un hecho, no en el dibujo. */ /* El fondo NO es el negro de la marca: es un marron quemado muy hondo, con el terracota dentro. Se cambio el 17/08 porque en negro puro el bloque quedaba apagado β€” Β«medio oscuroΒ», dicho por Maxi. Sigue siendo oscuro, pero es un oscuro CALIDO y de la familia del acento. */ /* ══ EL FONDO, CON LOS COLORES DE GOOGLE ══ 21/08/2026 ═══════════════ Pedido por Maxi. Se le seΓ±alo el riesgo β€”la seccion lleva escrito Β«Comanda no esta asociada a GoogleΒ» y usar su paleta puede leerse como lo contrarioβ€” y decidio seguir. Queda anotado aqui. Como se hace sin que parezca una copia del logotipo: Β· Los cuatro tonos van MUY diluidos sobre el azul oscuro de la marca, no puros. Se intuyen, no se identifican. Β· No van en el orden del logotipo ni en bloques separados: se funden en diagonal. Β· El texto sigue apoyandose en un fondo oscuro, no en el color. Sustituye al #231009, que era marron y venia de la paleta de papel y terracota anterior al 18/08. */ .seo-block{display:grid;grid-template-columns:1fr .92fr;gap:clamp(2rem,4.5vw,4rem);align-items:start; background: radial-gradient(120% 90% at 8% 12%, rgba(66,133,244,.34), transparent 58%), radial-gradient(100% 80% at 92% 8%, rgba(234,67,53,.22), transparent 55%), radial-gradient(110% 85% at 88% 92%, rgba(251,188,5,.20), transparent 58%), radial-gradient(105% 85% at 12% 95%, rgba(52,168,83,.22), transparent 58%), linear-gradient(150deg, #101d33, #0a1220 70%);color:#fff;border-radius:calc(var(--radius) + 6px);padding:clamp(1.8rem,3.5vw,3.2rem);position:relative;margin-bottom:1rem} /* πŸ”‘ El recorte vive AQUI, no en .seo-block. Si el bloque llevara overflow:hidden, position:sticky dejaria de funcionar dentro de el β€” es el fallo clasico y cuesta una tarde encontrarlo. */ .seo-glow{position:absolute;inset:0;overflow:hidden;pointer-events:none; border-radius:inherit;z-index:0} /* DOS focos, no uno. Con uno solo la mitad de abajo se apagaba y el bloque parecia partido: arriba caliente, abajo negro. */ /* ══ EL COLOR SE MUEVE POR DENTRO ══ 21/08/2026 ═════════════════════ Aqui habia DOS focos en terracota β€”rgba(232,106,69) y rgba(217,87,59)β€” sobrantes de la paleta de papel anterior al 18/08. Iban ENCIMA del fondo, asi que ensuciaban los colores de Google que se acababan de poner: se veia turbio y por eso Β«no estaba bienΒ». Ahora :before lleva los cuatro colores en la disposicion de la estrella y gira despacio; :after es el velo que protege el texto. πŸ”‘ Se anima TRANSFORM, no el degradado. Mover una capa ya pintada lo hace la GPU sin repintar nada; animar background-position obliga a redibujar el degradado en cada fotograma. Es la misma leccion que ya esta escrita mas arriba sobre no usar filter:blur. */ .seo-glow:before,.seo-glow:after{content:"";position:absolute} /* La capa de color: mas grande que el bloque para que al girar nunca asome un borde vacio. */ .seo-glow:before{ inset:-45%; background: radial-gradient(38% 38% at 50% 12%, #EA4335 0%, rgba(234,67,53,0) 70%), radial-gradient(34% 34% at 12% 50%, #FBBC05 0%, rgba(251,188,5,0) 72%), radial-gradient(38% 38% at 50% 88%, #34A853 0%, rgba(52,168,83,0) 70%), radial-gradient(36% 36% at 88% 50%, #4285F4 0%, rgba(66,133,244,0) 72%); animation:deriva 28s linear infinite; will-change:transform} /* El velo, quieto y por encima del color: sin el, el texto se apoyaria sobre una superficie que cambia de tono y el contraste dejaria de estar garantizado. */ .seo-glow:after{ inset:0; background:linear-gradient(100deg, rgba(6,8,16,.88) 0%, rgba(6,8,16,.74) 34%, rgba(6,8,16,.44) 68%, rgba(6,8,16,.30) 100%)} @keyframes deriva{ 0% {transform:rotate(0deg) scale(1.04)} 50% {transform:rotate(180deg) scale(1.16)} 100%{transform:rotate(360deg) scale(1.04)} } .seo-copy,.seo-visual{position:relative;z-index:1} .seo-tag{display:inline-block;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--acid);border:1px solid rgba(217,255,102,.4);border-radius:999px;padding:.3rem .75rem;margin-bottom:1.1rem} .seo-copy h3{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.3vw,3.1rem);line-height:1.02;letter-spacing:-.04em;margin:0 0 .9rem;max-width:15ch} .seo-copy>p{color:#b9b6af;font-size:.95rem;margin:0 0 1.8rem;max-width:48ch} .seo-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem} /* Los recuadros van SIEMPRE encendidos, no solo al pasar por encima: antes eran un gris translucido y solo se tenian de terracota con el raton. En movil no hay raton β€” o sea que nadie los veia encendidos. */ .seo-list li{display:grid;grid-template-columns:30px 1fr;gap:.9rem;align-items:start;padding:.75rem .9rem; border:1px solid rgba(232,106,69,.32);border-radius:14px; background:linear-gradient(180deg,rgba(232,106,69,.16),rgba(232,106,69,.07)); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); transition:border-color .25s var(--curva),background .25s var(--curva),transform .25s var(--curva)} .seo-list li:hover{border-color:#ef6a45;background:linear-gradient(180deg,rgba(232,106,69,.3),rgba(232,106,69,.16));transform:translateX(5px)} .seo-list i{font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.1em;color:#ef6a45;border:1px solid rgba(239,106,69,.55);border-radius:8px;text-align:center;padding:.28rem 0} .seo-list b{display:block;font-size:.87rem;font-weight:700;margin-bottom:.12rem} .seo-list span{font-size:.79rem;color:#a9a69f;line-height:1.45} .seo-list .extra{display:inline-block;font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--sobre-fluor);background:var(--acid);border-radius:999px;padding:.1rem .42rem;margin-left:.4rem;vertical-align:.1em} /* La frase que no promete nada. Va con la barra acida a la izquierda porque es el argumento mas fuerte de todo el bloque: la competencia promete posiciones, nosotros decimos que no se puede. */ .seo-honest{margin:1.6rem 0 0;padding:.9rem 0 .9rem 1.1rem;border-left:3px solid var(--acid);font-size:.87rem;color:#c3c0b9;max-width:52ch} .seo-honest b{color:#fff} /* ── El buscador, el mapa y la ficha ────────────────────────────────── El titular y el dibujo van pegados, como UN bloque, y ese bloque se centra en la columna. ⚠️ Se probo estirar la columna y pegar el titular arriba: el dibujo se iba al fondo y quedaba un agujero enorme en medio. Dos huecos simetricos se leen como aire; uno solo y gigante se lee como roto. */ /* Se queda pegado mientras bajas la lista de la izquierda, que es el doble de larga. Antes la columna se centraba y dejaba 354 px de hueco arriba y otros 354 abajo: aire muerto. Asi el dibujo te acompaΓ±a y no sobra un pixel. */ .seo-visual{display:flex;flex-direction:column;gap:1.15rem; position:sticky;top:calc(var(--h-cab-min) + 22px)} /* El titular. Misma tipografia que los titulos de seccion, para que se lea como un titulo y no como un pie de foto. Β«GoogleΒ» se teclea solo al entrar en pantalla. */ .seo-visual-titulo{font-family:var(--serif);font-weight:400; font-size:clamp(2.2rem,4.4vw,3.5rem);line-height:.98;letter-spacing:-.04em; margin:0;color:var(--paper)} .seo-visual-titulo b{color:#ef6a45;font-weight:400;white-space:nowrap} .caret-g{display:inline-block;width:3px;height:.78em;background:var(--acid); vertical-align:-.02em;margin-left:.14em;animation:parpadeo .75s step-end infinite} /* ── Las tres piezas, flotando en 3D ──────────────────────────────── Perspectiva en el contenedor y cada capa a distinta profundidad: el buscador delante, la ficha detras. El giro es de 6 grados, no de 20 β€” pasado eso el texto deja de leerse, y aqui lo que vende es que se lea. La perspectiva va en .seo-capas, que no contiene nada fijo. (Si se le pone a un ancestro con position:fixed dentro, se rompe.) */ .seo-capas{perspective:1200px;display:grid;gap:.85rem} .seo-capas>*{transform:rotateY(-6deg) rotateX(2.5deg);transform-origin:right center; transition:transform .45s var(--curva)} .seo-capas .search-mock{transform:rotateY(-6deg) rotateX(2.5deg) translateZ(38px)} .seo-capas .map-mock{transform:rotateY(-6deg) rotateX(2.5deg) translateZ(14px)} .seo-capas .local-mock{transform:rotateY(-6deg) rotateX(2.5deg) translateZ(-10px)} /* Al pasar por encima se enderezan: el 3D llama, y despues se lee bien */ .seo-capas:hover>*{transform:none} @media (max-width:1000px){ /* En movil no hay raton para enderezarlas, asi que van rectas */ .seo-capas>*,.seo-capas .search-mock,.seo-capas .map-mock,.seo-capas .local-mock{transform:none} } /* πŸ”‘ Las tres piezas comparten el mismo relieve, y NO es una sombra normal: una sombra oscura sobre un fondo oscuro no se ve β€” es como pintar de negro sobre negro. Lo que las despega son tres capas: 1. un filo claro de 1 px que dibuja el borde contra el marron 2. un halo terracota difuso, que las hace flotar sobre el fondo 3. una sombra honda de verdad, para el peso Antes solo tenian la 3, por eso quedaban pegadas al fondo. */ .search-mock,.map-mock,.local-mock{ box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 0 34px -6px rgba(239,106,69,.38), 0 26px 55px -20px rgba(0,0,0,.85); } .search-mock{background:var(--white);border-radius:999px;padding:.72rem 1.1rem;display:flex;align-items:center;gap:.7rem} /* La lupa la comparten el buscador de la seccion 03 y el de la cortina: un solo dibujo, dos sitios. Si se separan, acaban distintas. */ .search-mock .lupa,.busca-caja .lupa{width:15px;height:15px;border:2px solid var(--muted);border-radius:50%;position:relative;flex:none} .search-mock .lupa:after,.busca-caja .lupa:after{content:"";position:absolute;width:2px;height:7px;background:var(--muted);right:-3px;bottom:-5px;transform:rotate(-45deg)} .search-text{font-size:.86rem;color:var(--ink);white-space:nowrap;overflow:hidden;border-right:2px solid var(--accent);animation:teclear 8s steps(24) infinite,cursor .7s step-end infinite} @keyframes teclear{0%{width:0}22%{width:16.5ch}78%{width:16.5ch}100%{width:0}} @keyframes cursor{50%{border-color:transparent}} .map-mock{position:relative;height:150px;border-radius:18px;overflow:hidden;background:var(--paper-2)} /* Las Β«callesΒ»: dos tramas cruzadas de lineas. Mas barato que un mapa de verdad, y ademas un mapa de verdad seria una peticion externa. */ .map-mock:before{content:"";position:absolute;inset:0;background: repeating-linear-gradient(90deg,transparent 0 34px,rgba(17,17,15,.11) 34px 36px), repeating-linear-gradient(0deg,transparent 0 27px,rgba(17,17,15,.11) 27px 29px)} .map-road{position:absolute;left:-10%;top:52%;width:120%;height:11px;background:var(--white);transform:rotate(-7deg)} .pin{position:absolute;left:50%;top:46%;width:19px;height:19px;margin:-9px 0 0 -9px;background:var(--accent);border:3px solid var(--white);border-radius:50%;z-index:2;box-shadow:0 5px 14px rgba(0,0,0,.35)} /* El radar: dos anillos que salen del pin. Es lo que dice Β«estas aquiΒ» sin una palabra. */ .pin:before,.pin:after{content:"";position:absolute;inset:-7px;border:2px solid var(--accent);border-radius:50%;animation:radar 2.6s ease-out infinite} .pin:after{animation-delay:1.3s} @keyframes radar{0%{transform:scale(.5);opacity:.9}100%{transform:scale(3.4);opacity:0}} .map-chip{position:absolute;left:10px;bottom:10px;z-index:2;background:var(--ink);color:#fff;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px} /* El pie que nombra a Google y aclara que no somos socios suyos. Va pequeΓ±o y discreto a proposito: es una precision honesta, no un aviso legal que compita con el contenido. */ .seo-pie{margin:.1rem 0 0;font-size:.68rem;line-height:1.5;color:#8b8880;text-align:center} .seo-pie span{color:#6f6c65} /* La ficha del mapa, con la pinta que tiene de verdad: nombre, distancia, estrellas y horario. La DISTANCIA es el detalle que importa β€” es lo que demuestra, sin decirlo, que en busqueda local no existe Β«la primera posicionΒ»: depende de donde este parado el que busca. */ .local-mock{background:var(--white);color:var(--ink);border-radius:16px;padding:.9rem 1.05rem; display:flex;flex-direction:column;gap:.42rem} .local-cab{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem} .local-cab b{font-family:var(--serif);font-size:1.25rem;font-weight:400;line-height:1} .local-dist{font-size:.68rem;font-weight:700;color:var(--accent);white-space:nowrap; border:1px solid rgba(217,87,59,.35);border-radius:999px;padding:.14rem .5rem} .local-meta{display:flex;align-items:center;gap:.5rem} .local-nota{font-size:.72rem;color:var(--muted)} .local-pie{display:flex;align-items:center;gap:.45rem;font-size:.68rem;color:var(--muted); border-top:1px solid var(--line);padding-top:.45rem;margin-top:.1rem} .local-abierto{color:#2f6b46;font-weight:700} .local-abierto:after{content:"Β·";margin-left:.45rem;color:var(--muted);font-weight:400} .stars{display:flex;gap:2px} .stars i{font-style:normal;color:var(--accent);font-size:.95rem;opacity:0;animation:estrella .5s var(--curva) forwards} .stars i:nth-child(1){animation-delay:.15s}.stars i:nth-child(2){animation-delay:.3s} .stars i:nth-child(3){animation-delay:.45s}.stars i:nth-child(4){animation-delay:.6s} .stars i:nth-child(5){animation-delay:.75s} @keyframes estrella{from{opacity:0;transform:scale(.4) rotate(-25deg)}to{opacity:1;transform:none}} /* ── Las tarjetas de abajo: sombra que se tine al pasar por encima ──── */ .bento-card{transition:transform .3s var(--curva),box-shadow .3s var(--curva),border-color .3s var(--curva)} .bento-card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 26px 50px -22px rgba(217,87,59,.75)} @media (max-width:1000px){ .seo-block{grid-template-columns:1fr} } /* ══ 04 Β· LA CARTA CON QR ═══════════════════════════════════════════════ La escena de la mesa: el atril con el QR y el movil con la carta abierta. Todo dibujado con CSS y un SVG en linea. Cero imagenes, cero peticiones: la seccion entera no pide un solo archivo al servidor. */ .menu-stage{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center} .menu-scene{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:1.3rem;padding:.5rem 0} /* El atril de la mesa. Girado 3 grados: es lo que lo hace parecer un objeto sobre una mesa y no un recuadro pegado. */ .qr-stand{background:var(--white);border:1px solid var(--ink);border-radius:var(--radius);padding:1.1rem 1.1rem 1rem;width:min(46%,215px);text-align:center;box-shadow:16px 18px 0 rgba(17,17,15,.09);transform:rotate(-3deg);transition:transform .3s var(--curva)} .qr-stand:hover{transform:rotate(-1deg) translateY(-4px)} .qr-eyebrow{display:block;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);margin-bottom:.65rem} .qr-frame{position:relative;padding:.45rem} .qr-frame:before,.qr-frame:after{content:"";position:absolute;width:15px;height:15px;border:2px solid var(--accent)} .qr-frame:before{top:0;left:0;border-right:0;border-bottom:0} .qr-frame:after{bottom:0;right:0;border-left:0;border-top:0} .qr{display:block;width:100%;height:auto;fill:var(--ink);shape-rendering:crispEdges} .qr-caption{font-size:.67rem;color:var(--muted);margin:.75rem 0 0} /* El movil con la carta. Los alergenos van DENTRO de cada plato: es el detalle que demuestra que conocemos el negocio. */ .menu-phone{width:min(52%,238px);background:var(--ink);border-radius:27px;padding:9px;box-shadow:18px 20px 0 rgba(17,17,15,.12)} .menu-screen{background:var(--paper);border-radius:19px;overflow:hidden} .menu-bar{background:var(--ink);color:#fff;padding:.55rem .8rem;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center} .menu-list{padding:.6rem .8rem .8rem} .dish{padding:.55rem 0;border-bottom:1px solid var(--line)} .dish:last-child{border-bottom:0} .dish-top{display:flex;justify-content:space-between;gap:.5rem;align-items:baseline} .dish-top b{font-family:var(--serif);font-size:.87rem;font-weight:400} .dish-top span{font-size:.74rem;font-weight:700;font-variant-numeric:tabular-nums} .chips{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.4rem} .chips i{font-style:normal;font-size:.52rem;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--line);border-radius:999px;padding:.16rem .42rem;color:var(--muted)} .chips i.on{background:var(--accent);border-color:var(--accent);color:#fff} .menu-foot{background:var(--paper-2);padding:.5rem .8rem;font-size:.57rem;color:var(--muted);display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line)} .menu-foot b{font-family:var(--serif);font-size:.95rem;color:var(--accent);font-weight:400} .menu-points{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem} .menu-points li{border-top:1px solid var(--line);padding-top:1.15rem} .menu-points .tag{display:block;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--accent);margin-bottom:.55rem} .menu-points h3{font-family:var(--serif);font-size:1.55rem;font-weight:400;line-height:1.08;margin:0 0 .45rem} .menu-points p{margin:0;font-size:.88rem;color:var(--muted);max-width:46ch} /* El cierre de la seccion: los casos reales de un bar, dichos por su nombre. Es lo que dice Β«sabemos como funciona tu negocioΒ» sin tener que decirlo. */ .menu-note{margin:3rem 0 0;padding:1.3rem 1.5rem;border:1px solid var(--ink);border-radius:var(--radius);background:var(--paper-2);font-size:.9rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem 2rem} .menu-note p{margin:0;color:var(--muted)} .menu-note b{color:var(--ink)} @media (max-width:1000px){ .menu-stage{grid-template-columns:1fr} } @media (max-width:680px){ .menu-scene{flex-direction:column;align-items:center;gap:1.8rem} .qr-stand{width:min(74%,215px)} .menu-phone{width:min(80%,238px)} } /* ══════════════════════════════════════════════════════════════════ ESTE BLOQUE VA AL FINAL A PROPOSITO. Son ajustes que pisan reglas de mas arriba con la MISMA especificidad (.section, .nav a, .includes). Con igual especificidad manda el que va despues: si se sube, deja de aplicarse. Paso de verdad al escribirlo. ══════════════════════════════════════════════════════════════════ */ /* DETALLES PEDIDOS POR MAXI - 18/08/2026 ------------------------------ */ /* 1 Β· LA BARRA DE ARRIBA, MAS TRANSPARENTE Y CON PILDORAS ------------- Dos cosas distintas: a) mas vidrio: baja la opacidad del fondo y sube el desenfoque. Al quitar cuerpo al fondo hay que SUBIR el blur, si no se lee el texto de la pagina a traves y marea. b) el menu deja de ser texto con una rayita al pasar y pasa a pildoras. La pildora se dibuja SIEMPRE (borde tenue) y se enciende al pasar o cuando es la seccion activa: un boton que solo aparece al pasar el raton no existe en un movil, que es donde entra el 90 %. */ html[data-glow] .header{ background:color-mix(in srgb, var(--vidrio) 62%, transparent); -webkit-backdrop-filter:blur(28px) saturate(1.7); backdrop-filter:blur(28px) saturate(1.7); } html[data-glow] .header.encogida{ background:color-mix(in srgb, var(--vidrio-baja) 78%, transparent); -webkit-backdrop-filter:blur(34px) saturate(1.8); backdrop-filter:blur(34px) saturate(1.8); } .nav{gap:.35rem} .nav a{ padding:.5rem .95rem; border-radius:999px; border:1px solid color-mix(in srgb, var(--accent) 22%, transparent); background:color-mix(in srgb, var(--accent) 7%, transparent); transition:background .25s var(--curva), border-color .25s var(--curva), box-shadow .25s var(--curva), color .25s var(--curva); } .nav a:hover, .nav a:focus-visible{ background:color-mix(in srgb, var(--accent) 18%, transparent); border-color:color-mix(in srgb, var(--accent) 55%, transparent); box-shadow:0 0 18px color-mix(in srgb, var(--luz-1) 40%, transparent); } /* la rayita de antes sobra: la pildora ya marca */ .nav a:after{display:none} .header.encogida .nav a{border-color:color-mix(in srgb, var(--accent) 30%, transparent)} /* 3 Β· LOS SEPARADORES DE SECCION, CON LUZ ----------------------------- Igual que el filo de la cabecera: una linea que se apaga en los bordes y brilla en el centro. Un borde plano de 1px sobre azul oscuro casi no se ve; este si, y ademas ata la pagina con la barra. Va como pseudoelemento y NO como border-bottom: un degradado no se puede poner en un borde. Se le quita el borde a .section para que no queden los dos. */ .section{border-bottom:0;position:relative} .section:after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--luz-1) 55%, transparent) 26%, color-mix(in srgb, var(--luz-2) 75%, transparent) 50%, color-mix(in srgb, var(--luz-1) 55%, transparent) 74%, transparent 100%); pointer-events:none; } /* El bloque del asistente va en degradado a sangre: ahi la linea sobra porque el propio bloque ya corta. */ .diagnostic:after{display:none} /* 2 Β· LA TARJETA DE PRECIO ------------------------------------------- El 55 mide 8rem con line-height .7, o sea que el trazo se sale por abajo de su caja. La frase que iba debajo quedaba pisada. Ahora va AL LADO, en la misma columna que el simbolo, y mas grande. */ .price{align-items:flex-start} .price>div{margin-left:.7rem;justify-content:flex-start} .price-final{ display:block; margin-top:.9rem; font-family:var(--sans); font-weight:700; font-size:1.28rem; line-height:1.15; letter-spacing:-.01em; color:var(--accent); text-transform:none; } /* El boton pasa al azul de la pagina, con su halo, para que sea la pieza que mas pesa de la tarjeta. */ html[data-glow] .price-cta{ background:var(--grad); color:var(--fondo-glow); border-color:transparent; box-shadow:var(--halo); } html[data-glow] .price-cta:hover{box-shadow:var(--halo-fuerte)}/* 4 Β· LA FICHA DE GOOGLE, EN LA PALETA ------------------------------- Estaba forzada a tarjetas CLARAS (era Β«la pantalla de otra personaΒ»). Maxi pide sinergia con el resto: pasa a tarjetas oscuras con filo encendido, como todo lo demas. Se mantiene lo que NO es negociable: sigue sin logo, sin la tipografia de Google y sin sus colores. Es un buscador generico con NUESTRA paleta, y el pie lo sigue diciendo. */ html[data-glow] .search-mock,html[data-glow] .local-mock,html[data-glow] .busca-caja,html[data-glow] .busca-resultado{ --ink:#eaf0fa; --muted:#b0bdd1; --accent:#8bb8ff; color:#eaf0fa; background:color-mix(in srgb, var(--luz-1) 12%, #0d1930); border:1px solid color-mix(in srgb, var(--luz-1) 34%, transparent); box-shadow:0 0 30px color-mix(in srgb, var(--luz-1) 18%, transparent); } html[data-glow] .map-mock{ --ink:#eaf0fa; --muted:#b0bdd1; background:color-mix(in srgb, var(--luz-1) 9%, #0b1526); border:1px solid color-mix(in srgb, var(--luz-1) 26%, transparent); } html[data-glow] .map-road{background:color-mix(in srgb, var(--luz-2) 45%, transparent)} html[data-glow] .map-chip{background:var(--grad);color:var(--fondo-glow)} html[data-glow] .pin{box-shadow:0 0 22px color-mix(in srgb, var(--luz-2) 70%, transparent)} html[data-glow] .local-dist{color:var(--acid)} html[data-glow] .local-abierto{color:var(--fondo-glow);background:var(--acid)} html[data-glow] .stars i{color:var(--acid)} html[data-glow] .seo-list i{color:var(--acid)} html[data-glow] .seo-tag{color:var(--acid);border-color:color-mix(in srgb, var(--luz-2) 45%, transparent)} html[data-glow] .seo-honest{border-left-color:var(--acid);color:#b0bdd1} /* 5 Β· LOS DOS BLOQUES QUE SE ABREN ----------------------------------- La raya superior de la lista chocaba con las etiquetas A-E del bento: se quita y en su sitio va un antetitulo. */ .includes{border-top:0;margin-top:1.1rem;padding-top:0} .includes-titulo{ margin:2.8rem 0 0; font-size:.69rem; font-weight:700; text-transform:uppercase; letter-spacing:.18em; color:var(--accent); } .menu-note{margin-top:2.6rem} /* En el menu de movil la nav es una columna: las pildoras se estiraban a los 327 px de ancho y parecian barras, no botones. Que abracen el texto. */ @media (max-width:900px){ .nav{align-items:flex-start;gap:.6rem} .nav a{padding:.45rem 1.1rem} } /* ══ CARRUSEL DE TRABAJOS ══ 21/08/2026 ══════════════════════════════ Fundido cruzado, no deslizamiento lateral: con dos o tres laminas el carril horizontal se nota vacio, y el fundido no obliga a calcular anchos ni a clonar laminas. 🚨 Sin JavaScript se ve la PRIMERA lamina, entera y con su enlace. No queda una caja vacia: el HTML lleva la primera ya visible. */ /* πŸ”„ 21/08: la ventana se achica de 900 a 620 px. A 900 la captura competia con el contenido de la pagina; a 620 se lee como una muestra y deja respirar la seccion. */ .carrusel{position:relative;max-width:620px;margin:0 auto} .carrusel-pista{list-style:none;margin:0;padding:0;position:relative; aspect-ratio:820/622;border-radius:calc(var(--radius) + 6px); overflow:hidden;border:1px solid var(--line);background:var(--paper-2)} .carrusel-lam{position:absolute;inset:0;opacity:0; transition:opacity .9s var(--curva);pointer-events:none} .carrusel-lam:first-child,.carrusel-lam.activa{opacity:1;pointer-events:auto} .carrusel-lam a{display:block;width:100%;height:100%;position:relative} .carrusel-lam img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block} /* El pie va sobre un velo, no sobre la imagen pelada: encima de una captura clara el texto blanco no tiene contraste garantizado. */ .carrusel-pie{position:absolute;left:0;right:0;bottom:0; display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap; padding:2.6rem 1.4rem 1.1rem; background:linear-gradient(180deg,transparent, color-mix(in srgb, var(--paper) 92%, transparent) 62%)} .carrusel-pie b{font-family:var(--serif);font-size:1.35rem;font-weight:400; letter-spacing:-.02em;color:var(--ink)} .carrusel-pie i{font-style:normal;font-size:.66rem;font-weight:700; letter-spacing:.18em;text-transform:uppercase;color:var(--accent)} .carrusel-puntos{display:flex;justify-content:center;gap:.55rem;margin-top:1.1rem} /* 🚨 El punto se VE de 34x3 px, pero el area que se toca mide 44 px de alto. Medido: antes el boton entero eran 3 px y en un movil eso no se acierta con el dedo. La barrita es un ::before, no el boton. */ .carrusel-puntos{gap:0} .carrusel-puntos button{width:46px;height:44px;padding:0;border:0;cursor:pointer; background:none;display:grid;place-items:center; -webkit-tap-highlight-color:transparent} .carrusel-puntos button:before{content:"";display:block;width:34px;height:3px; border-radius:999px;background:var(--line); transition:background .3s var(--curva)} .carrusel-puntos button[aria-selected="true"]:before{background:var(--grad)} .carrusel-puntos button:focus-visible{outline:2px solid var(--accent);outline-offset:4px} @media (prefers-reduced-motion:reduce){ .carrusel-lam{transition:none} } /* ══ CARRUSEL DEL MOVIL DEL HERO ══ 21/08/2026 ═══════════════════════ Fundido cruzado dentro de la pantalla del telefono. Las laminas se apilan y solo cambia la opacidad: no hay reflow, lo resuelve la GPU. */ .movil-carrusel{position:absolute;inset:0;overflow:hidden;border-radius:inherit} .movil-lam{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:top center;display:block; opacity:0;transition:opacity 1s var(--curva)} .movil-lam.activa{opacity:1} @media (prefers-reduced-motion:reduce){.movil-lam{transition:none}} /* La marca de Β«ExtraΒ» en una tarjeta de sector. Va porque las reservas NO entran en los 55 €: son montaje aparte (desde 150 €). EnseΓ±arlo dentro de la lista sin decirlo seria vender algo que no incluye. 🚨 No se nombra a la aplicacion de la competencia: la regla del index.html dice Β«no nombrar a la competenciaΒ», y el argumento β€”no pagar cuota por empleadoβ€” se entiende sin decir de quien. */ .sector-list .extra-tag{display:inline-block;margin-left:.45rem; font-size:.55rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--fondo-glow);background:var(--acid); border-radius:999px;padding:.12rem .45rem;vertical-align:.12em} /* ══ LOS PLANES ══ 21/08/2026 ════════════════════════════════════════ El mensual es el heroe: el numero manda y el montaje va debajo en una linea. Es al reves de como estaba antes, cuando el 199 competia con el 55 y no se sabia cual era el precio. */ .planes-rubros{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem; margin:0 0 2.4rem;padding:0;justify-content:center} .planes-rubros li{font-size:.66rem;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--muted); border:1px solid var(--line);border-radius:999px;padding:.42rem .95rem} .planes-rejilla{display:grid;gap:1.4rem;max-width:940px;margin:0 auto; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start} /* La tarjeta ya no es un rectangulo plano: lleva un degradado de arriba abajo, un filo de luz en el borde superior y una sombra que la separa del fondo. Los tres juntos son lo que la levanta del plano. */ .plan{position:relative;display:flex;flex-direction:column; border:1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius:calc(var(--radius) + 4px); background:linear-gradient(165deg, color-mix(in srgb, var(--paper-2) 100%, transparent), color-mix(in srgb, var(--paper) 92%, transparent)); padding:2rem 1.7rem 1.6rem; box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 20%, transparent), 0 18px 44px rgba(0,0,0,.30); transition:transform .35s var(--curva),box-shadow .35s var(--curva), border-color .35s var(--curva)} .plan:hover{transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 38%, transparent); box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 28%, transparent), 0 22px 54px rgba(0,0,0,.36), 0 0 60px color-mix(in srgb, var(--luz-1) 16%, transparent)} /* El destacado NO es "mas popular": dice a quien le sirve. Una etiqueta de popularidad que no se puede comprobar es exactamente lo que esta pagina no hace en ningun otro sitio. */ /* El destacado: mismo lenguaje, mas encendido. No cambia de forma ni de tamaΓ±o β€” se distingue por luz, no por ser mas grande. */ .plan-destacado{border-color:color-mix(in srgb, var(--accent) 50%, transparent); box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 32%, transparent), 0 18px 44px rgba(0,0,0,.34), 0 0 70px color-mix(in srgb, var(--luz-1) 26%, transparent)} .plan-destacado:hover{ box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 40%, transparent), 0 22px 54px rgba(0,0,0,.4), 0 0 90px color-mix(in srgb, var(--luz-1) 34%, transparent)} /* Las dos cintas comparten forma. La del destacado va encendida con el degradado y su halo; la del otro, en vidrio, para que se lean como la misma familia sin competir. */ .plan-cinta{position:absolute;top:0;left:50%;transform:translate(-50%,-50%); /* 🚨 SIN nowrap. Medido: Β«Ideal para proyectos y emprendimientos nuevosΒ» pedia 353 px, no cabia en su tarjeta y se salia de la pantalla. Con dos lineas permitidas y un tope del 88% del ancho de la tarjeta, cualquier frase entra sin romper nada. */ margin:0;max-width:88%;text-align:center;text-wrap:balance; font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase; line-height:1.25; border-radius:999px;padding:.4rem 1rem; /* πŸ”„ 21/08: las dos cintas van IGUAL, encendidas con el degradado. Antes la del plan barato iba en vidrio para no competir con la del destacado; Maxi las quiere iguales. 🚨 CONSECUENCIA: la cinta ya no distingue nada. Lo que marca cual es el plan principal son el borde de acento y el halo de .plan-destacado, y nada mas. Si algun dia se le quitan, las dos tarjetas pasan a leerse igual. */ color:var(--fondo-glow);background:var(--grad); border:1px solid transparent;box-shadow:var(--halo)} /* Con cinta, la tarjeta necesita un pelo mas de aire arriba para que no pise el nombre del plan. */ .plan{padding-top:2.4rem} .plan-nombre{font-family:var(--serif);font-size:1.9rem;font-weight:400; letter-spacing:-.03em;color:var(--ink);margin:.2rem 0 .35rem} .plan-para{font-size:.86rem;color:var(--muted);margin:0 0 1.5rem;min-height:2.6em} .plan-precio{display:flex;align-items:flex-start;gap:.35rem;margin:0} .plan-precio strong{font-family:var(--serif);font-size:4.6rem;line-height:.78; font-weight:400;letter-spacing:-.05em;color:var(--ink); font-variant-numeric:tabular-nums} .plan-precio span{display:flex;flex-direction:column;padding-top:.35rem} .plan-precio span>*{line-height:1} .plan-precio small{font-size:.82rem;color:var(--muted);margin-top:.2rem} .plan-dia{font-size:.78rem;color:var(--muted);margin:.7rem 0 0} .plan-dia b{color:var(--accent);font-weight:700} .plan-alta{font-size:.86rem;color:var(--muted);margin:.45rem 0 0; padding-top:.9rem;border-top:1px solid var(--line)} .plan-alta b{color:var(--ink);font-weight:700} /* Sin cruces. Solo lo que SI lleva cada uno: marcar lo que le falta al barato lo convierte en un castigo, y es una rampa, no un aparcadero. */ .plan-lista{list-style:none;margin:1.4rem 0 1.6rem;padding:0; display:flex;flex-direction:column;gap:.6rem;flex:1} .plan-lista li{font-size:.86rem;color:var(--muted);line-height:1.45; padding-left:1.4rem;position:relative} .plan-lista li:before{content:"";position:absolute;left:0;top:.52em; width:7px;height:7px;border-radius:50%;background:var(--grad)} .plan-lista .plan-todo{color:var(--ink);font-weight:700;padding-left:0} .plan-lista .plan-todo:before{display:none} /* ══ BOTON DE VIDRIO ══ 21/08/2026 ═══════════════════════════════════ Pastilla translucida que deja ver la tarjeta por detras, con un filo claro arriba (inset box-shadow) que es lo que hace que se lea como cristal y no como un rectangulo gris. ⚠️ backdrop-filter aqui SI, en la cortina NO. La nota del estandar avisa de filter:blur() a pantalla completa, que hay que repintar en cada fotograma. Esto es una pastilla de 250x54 px y quieta. 🚨 Lleva su propio fondo de reserva: si el navegador no soporta backdrop-filter, queda una pastilla translucida legible igual. */ .plan-cta{width:100%;justify-content:center; background:color-mix(in srgb, var(--ink) 12%, transparent); border:1px solid color-mix(in srgb, var(--ink) 28%, transparent); color:var(--ink); -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3); box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 34%, transparent), 0 10px 26px rgba(0,0,0,.28); transition:transform .3s var(--curva),background .3s var(--curva), box-shadow .3s var(--curva),border-color .3s var(--curva)} .plan-cta:hover{transform:translateY(-3px); background:color-mix(in srgb, var(--ink) 20%, transparent); border-color:color-mix(in srgb, var(--accent) 60%, transparent); box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 46%, transparent), var(--halo)} /* El del destacado va un punto mas encendido, para que se note cual es el que se ofrece primero sin cambiarle la forma. */ .plan-destacado .plan-cta{ border-color:color-mix(in srgb, var(--accent) 45%, transparent); box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 40%, transparent), 0 0 26px color-mix(in srgb, var(--luz-1) 26%, transparent)} /* 🚨 La permanencia va AQUI, debajo del boton y a la vista. */ .plan-letra{font-size:.72rem;color:var(--muted);text-align:center; margin:.85rem 0 0;line-height:1.4} .planes-pie{max-width:62ch;margin:2.6rem auto 0;text-align:center; font-size:.88rem;color:var(--muted);line-height:1.6} .planes-pie b{color:var(--ink)} @media (max-width:560px){ .plan{padding:1.8rem 1.3rem 1.4rem} .plan-precio strong{font-size:3.8rem} .plan-para{min-height:0} .plan-cinta{font-size:.55rem;letter-spacing:.1em} } /* ══ EL PIE ══ 21/08/2026 ════════════════════════════════════════════ Los enlaces legales van en var(--muted): discretos, pero con contraste comprobado. Discreto no es invisible β€” la ley pide que sean accesibles, y un enlace que no se ve no lo es. */ .footer{border-top:1px solid var(--line); padding:clamp(3rem,6vw,4.5rem) max(24px,calc((100vw - var(--max))/2)) 3rem; display:grid;gap:2rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:start} /* El logo del pie ya hereda tipografia y espaciado de .marca-comanda. Aqui solo su tamaΓ±o: 22px contra los 26px de la cabecera. Todo cuelga de ese font-size en em, asi que el bloque entero escala solo. */ .footer-marca{font-size:22px} .footer-marca .marca-simbolo{filter:drop-shadow(0 0 14px color-mix(in srgb, var(--luz-1) 55%, transparent))} .footer-zona{font-family:var(--serif);font-size:1.3rem;line-height:1.25; letter-spacing:-.02em;color:var(--ink);margin:0} .footer-contacto,.footer-legal{display:flex;flex-direction:column;gap:.55rem} .footer-contacto a,.footer-legal a{font-size:.85rem;color:var(--muted); text-decoration:none;border-bottom:1px solid transparent; align-self:flex-start;transition:color .25s var(--curva),border-color .25s var(--curva)} .footer-contacto a:hover,.footer-legal a:hover{color:var(--ink);border-bottom-color:var(--accent)} .footer-legal span{font-size:.76rem;color:var(--muted);opacity:.8;line-height:1.45;margin-top:.4rem} @media (max-width:560px){.footer{gap:2.4rem;text-align:left}} /* ══ QUIEN ESTA DETRAS ══ 21/08/2026 ═════════════════════════════════ Sin foto y sin apellidos, por decision de Maxi. El peso lo lleva el lema en serif grande; debajo, tres parrafos cortos que lo sostienen. */ .quienes-cuerpo{max-width:var(--max);margin:0 auto} .quienes-lema{font-family:var(--serif);font-weight:400; font-size:clamp(1.4rem,2.5vw,2.1rem);line-height:1.28;letter-spacing:-.028em; color:var(--ink);max-width:34ch;margin:0 0 clamp(2rem,4vw,3rem); text-wrap:balance} .quienes-lema em{font-style:italic;color:var(--accent)} .quienes-cols{display:grid;gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .quienes-cols p{margin:0;font-size:.92rem;line-height:1.6;color:var(--muted); padding-top:1.1rem;border-top:1px solid var(--line)} .quienes-cols b{display:block;color:var(--ink);font-weight:700;margin-bottom:.4rem} /* ── La barra de cierre del pie ── 21/08/2026 ───────────────────────── Ocupa el ancho entero por debajo de las columnas: es la linea que cualquiera busca cuando quiere el aviso legal. */ .footer-barra{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:1rem 2rem; justify-content:space-between;align-items:center; margin-top:1.4rem;padding-top:1.6rem;border-top:1px solid var(--line)} .footer-barra p{margin:0;font-size:.78rem;color:var(--muted)} .footer-barra nav{display:flex;gap:1.6rem} .footer-barra a{font-size:.78rem;color:var(--muted);text-decoration:none; border-bottom:1px solid transparent; transition:color .25s var(--curva),border-color .25s var(--curva)} .footer-barra a:hover{color:var(--ink);border-bottom-color:var(--accent)} .footer-nota{font-size:.74rem;color:var(--muted);opacity:.8;line-height:1.45;margin-top:.3rem} .footer-zona b{color:var(--ink);font-weight:400} /* Area tactil del pie ── 21/08/2026 ────────────────────────────────── Los enlaces median 20-22 px de alto. En un movil eso no se acierta, y dos de ellos son los legales, que tienen que ser accesibles de verdad y no solo estar presentes. El texto no cambia de tamaΓ±o: crece la caja. */ @media (max-width:760px){ .footer-contacto a,.footer-barra a{padding:.6rem 0;min-height:44px; display:inline-flex;align-items:center} .footer-barra nav{gap:1.2rem;flex-wrap:wrap} } /* ══ RESEΓ‘AS ══ 21/08/2026 ═══════════════════════════════════════════ Maquetada aunque la seccion este apagada: cuando llegue el permiso de Florencia se enciende descomentando el HTML, sin tocar CSS. Con una sola reseΓ±a la rejilla la centra; con tres o mas se reparten. */ .resenas-rejilla{display:grid;gap:1.2rem;max-width:940px;margin:0 auto; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));justify-content:center} .resena{margin:0;display:flex;flex-direction:column;gap:.9rem; border:1px solid var(--line);border-radius:calc(var(--radius) + 4px); background:linear-gradient(165deg,var(--paper-2),color-mix(in srgb, var(--paper) 92%, transparent)); padding:1.7rem 1.5rem; box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 18%, transparent)} .resena-estrellas span{color:var(--acid);font-size:1.05rem;letter-spacing:.14em} .resena blockquote{margin:0;font-family:var(--serif);font-weight:400; font-size:clamp(1.25rem,2.1vw,1.65rem);line-height:1.3;letter-spacing:-.02em; color:var(--ink)} .resena blockquote:before{content:"Β«"} .resena blockquote:after{content:"Β»"} .resena figcaption{display:flex;flex-direction:column;gap:.25rem;margin-top:auto; padding-top:.9rem;border-top:1px solid var(--line)} .resena figcaption b{font-size:.92rem;color:var(--ink)} .resena figcaption a{font-size:.76rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--accent);text-decoration:none; align-self:flex-start;border-bottom:1px solid transparent; transition:border-color .25s var(--curva)} .resena figcaption a:hover{border-bottom-color:var(--accent)}