/* ============================================================ ELECTRO-V — Hoja de estilos principal (sin build) Paleta: violeta eléctrico #7C3AED · negro #0A0A0A/#141414 · blanco Tipografía: Archivo (900 itálica en titulares) + Caveat (firma manuscrita) ============================================================ */ :root { --violeta: #7C3AED; --violeta-osc: #6D28D9; --violeta-claro: #A78BFA; --violeta-glow: rgba(124, 58, 237, .38); --negro: #0A0A0A; --negro-card: #141414; --blanco: #FFFFFF; --gris-fondo: #F4F4F6; --gris-texto: #5B5B66; --gris-suave: #9CA3AF; --borde: #E5E7EB; --verde-wa: #25D366; --radius: 16px; --radius-sm: 12px; --sombra: 0 10px 30px rgba(10, 10, 10, .08); --sombra-violeta: 0 8px 28px var(--violeta-glow); --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-firma: 'Caveat', cursive; --header-h: 84px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; /* recorta también los paneles fixed (menú móvil cerrado): sin scroll lateral */ } body { font-family: var(--font); color: var(--negro); background: var(--blanco); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: clip; /* evita scroll lateral por elementos fuera de pantalla (p. ej. menú móvil cerrado) */ } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; } .container { width: min(1200px, 92%); margin-inline: auto; } .section { padding: clamp(44px, 4.6vw, 64px) 0; } .section.gris { background: var(--gris-fondo); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--violeta); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 0; } .skip-link:focus { left: 0; } /* ---------- Tipos ---------- */ h1, h2, h3, .h1, .h2, .h3 { font-weight: 900; text-transform: uppercase; line-height: 1.04; letter-spacing: -.01em; } /* Escala del titular medida sobre el mockup: las líneas grandes miden 33-35 px de mockup, que con el factor del contenedor (1200/881 = 1,362) son 45-48 px reales de altura de mayúscula ≈ 63 px de cuerpo. Ni los 73,6 px de antes (11 % de más) ni los 57,6 px de un primer recorte (13 % de menos). */ h1, .h1 { font-size: clamp(2.4rem, 4.4vw, 3.9rem); } /* Medido en el mockup: los titulares de sección tienen 19 px de altura de mayúscula = 36 px reales de cuerpo; a 48 px iban un 33 % por encima y engordaban todas las secciones. */ h2, .h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); } h3, .h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); } em, .it { font-style: italic; color: var(--violeta); } .eyebrow { display: inline-block; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .22em; color: var(--violeta); margin-bottom: 14px; } /* El mockup NO pone glifo delante del antetítulo: era un emoji ⚡ que se dibujaba distinto en cada sistema (manchita de color). Fuera: solo mayúsculas espaciadas en violeta. */ .lead { color: var(--gris-texto); font-size: 1.06rem; max-width: 56ch; } .center { text-align: center; } .center .lead { margin-inline: auto; } .sec-head { margin-bottom: clamp(20px, 2.4vw, 32px); } .firma { font-family: var(--font-firma); font-weight: 700; text-transform: none; color: var(--violeta); line-height: .95; font-size: clamp(1.9rem, 3.4vw, 2.8rem); transform: rotate(-4deg); display: inline-block; } /* ---------- Botones ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border-radius: 999px; border: 2px solid transparent; font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; white-space: nowrap; } .btn .ic { transition: transform .18s ease; } .btn:hover .ic { transform: translateX(4px); } .btn-primary { background: var(--violeta); color: #fff; box-shadow: var(--sombra-violeta); } .btn-primary:hover { background: var(--violeta-osc); transform: translateY(-2px); } .btn-outline { background: transparent; color: var(--negro); border-color: var(--borde); } .btn-outline:hover { border-color: var(--violeta); color: var(--violeta); } .btn-outline.inv { color: #fff; border-color: rgba(255,255,255,.4); } .btn-outline.inv:hover { border-color: var(--violeta-claro); color: var(--violeta-claro); } .btn-sm { padding: 11px 22px; font-size: .78rem; } .btn-lg { padding: 18px 38px; font-size: .92rem; } .link-mas { display: inline-flex; align-items: center; gap: 8px; color: var(--violeta); font-weight: 800; text-transform: uppercase; font-size: .82rem; letter-spacing: .1em; } .link-mas:hover { text-decoration: underline; } /* ---------- Iconos ---------- */ .ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } .ic-fill { fill: currentColor; stroke: none; } .ic-brand { stroke: #fff; } .ic-xs { width: 18px; height: 18px; } .ic-sm { width: 20px; height: 20px; } .ic-lg { width: 30px; height: 30px; } .icon-badge { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(124, 58, 237, .1); color: var(--violeta); flex: none; } .icon-badge.line { background: transparent; border: 1.5px solid var(--violeta); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .97); /* opaco: sin backdrop-filter */ /* backdrop-filter eliminado: crea containing block y atrapa el menú fixed del móvil (bug Chrome 138+) */ border-bottom: 1px solid transparent; transition: box-shadow .25s ease, border-color .25s ease; } .site-header.compact { box-shadow: 0 4px 24px rgba(10,10,10,.08); border-color: var(--borde); } .header-inner { /* El mismo ancho que .container: si la cabecera mide 1280 y el contenido 1200, el logo y el botón quedan 80 px por fuera de los márgenes de la página y nada cuadra con el hero. */ width: min(1200px, 92%); margin-inline: auto; /* Rejilla de 3 columnas con las laterales iguales: así el menú queda centrado EXACTO en la página. Con flex y space-between se descentraba 26 px, porque el logo (149 px) y el botón (201 px) no miden lo mismo. */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; height: var(--header-h); transition: height .25s ease; } /* Cada elemento a su columna, explícitamente: el menú pasa a position:fixed en pantallas estrechas y entonces la colocación automática movía el botón/hamburguesa a la columna del centro (se quedaba en x530 en vez del borde derecho). */ .header-inner > .brand { grid-column: 1; justify-self: start; } .header-inner > .main-nav { grid-column: 2; justify-self: center; } .header-inner > .header-cta { grid-column: 3; justify-self: end; } .site-header.compact .header-inner { height: 66px; } .brand { display: inline-flex; align-items: center; gap: 12px; } .brand-logo { width: 46px; height: 46px; border-radius: 50%; background: var(--negro); display: inline-flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 0 0 0 var(--violeta-glow); transition: box-shadow .3s ease; } .brand:hover .brand-logo { box-shadow: 0 0 0 8px var(--violeta-glow); } /* Marca en SVG real (kit electro-v-assets): el rayo va por ALTURA, que el dibujo es vertical */ .brand-mark { display: block; height: 26px; width: auto; } .brand-inv .brand-logo { background: var(--violeta); } .p-splash .brand-logo .brand-mark { height: 30px; } .store-badge .brand-mark { height: 26px; width: auto; } .brand-txt { display: flex; flex-direction: column; line-height: 1.05; } .brand-name { font-weight: 900; font-size: 1.22rem; letter-spacing: .02em; } .brand-name .v { color: var(--violeta); font-style: italic; } .brand-tag { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; color: var(--gris-suave); } .brand-inv .brand-name { color: #fff; } /* ---------- Logo del mockup (imagen, no texto) ---------- Símbolo (aro + rayo del cliente) + ELECTRO-V + lema, en trazados: un solo fichero. La cabecera del mockup es blanca, así que aquí va la versión clara; el pie, que es negro, usa la versión oscura. El lema va dentro del logo y no se repite aparte. */ /* Altura medida sobre el mockup: su logo de cabecera mide 47 px de mockup = 64-72 px reales, así que a 58 px iba un 10 % corto y el cliente lo veía "muy pequeño" en la parte de arriba. */ /* Se dimensiona por ANCHO, no por alto: el logo ya tiene las proporciones del mockup (450 × 112) y con alto fijo la columna izquierda de la rejilla lo aplastaba (hasta un 17 % a 1200 px de ancho), porque max-width:100 % recorta el ancho pero mantiene el alto. Con el ancho fluido la forma del logo no se deforma nunca. 289 px de ancho = 72 px de alto; 209 px = 52 px (cabecera compacta y pie); 169 px = 42 px (móvil). */ .brand-img { display: block; width: min(289px, 21vw); height: auto; } /* El encogido del logo al hacer scroll es SOLO de escritorio. En móvil la regla de compactado (misma o más especificidad que la media query) dejaba el logo en 15,2vw ≈ 59 px al bajar: ahora mantiene el tamaño de arriba (169 px) todo el rato y solo se recorta el alto del header. */ @media (min-width: 641px) { .site-header.compact .brand-img { width: min(209px, 15.2vw); } } .brand-img-inv { width: min(209px, 40vw); } @media (max-width: 1160px) { .brand-img { width: min(289px, 62vw); } } /* el menú ya no está al lado */ @media (max-width: 640px) { .brand-img { width: 169px; } .brand-img-inv { width: 137px; } } .ph-logo { display: block; width: 78px; height: auto; margin: 0 auto 4px; } .main-nav ul { display: flex; gap: clamp(14px, 2.4vw, 34px); } .main-nav a { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; padding: 8px 2px; position: relative; color: var(--negro); } .main-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--violeta); border-radius: 2px; transition: width .22s ease; } .main-nav a:hover::after, .main-nav a.activo::after { width: 100%; } .main-nav a.activo { color: var(--violeta); } .header-cta { display: flex; align-items: center; gap: 14px; } .nav-burger { display: none; background: none; border: 0; width: 40px; height: 40px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; } .nav-burger span { width: 24px; height: 2.5px; background: var(--negro); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; } .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } @media (max-width: 1160px) { /* El corte estaba en 1020 y con la cabecera a 1200 de ancho el menú ya no cabía: logo (196) + menú (608) + botón (201) + huecos = 1045, así que entre 1020 y 1160 se comprimía y quedaba descentrado. Por debajo de 1160 pasa a panel lateral, que es lo que se quiere. */ .nav-burger { display: flex; } .main-nav { position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw); background: #fff; box-shadow: -12px 0 40px rgba(0,0,0,.14); transform: translateX(100%); transition: transform .3s ease, visibility .3s; visibility: hidden; /* fuera de pantalla = invisible y sin generar scroll lateral */ padding: 110px 34px 34px; z-index: 99; } .main-nav.abierta { transform: translateX(0); visibility: visible; } .nav-burger { position: relative; z-index: 101; /* sobre el panel, para poder cerrar */ } .main-nav ul { flex-direction: column; gap: 8px; } .main-nav a { display: block; font-size: 1rem; padding: 12px 0; } .header-cta .btn { display: none; } } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; } .hero-grid { /* La columna de texto pesa más que la de la foto: en el mockup los dos botones van en UNA fila (342 + 275 + 14 = 631 px) y con el reparto anterior (1.05/.95 ≈ 601 px) se apilaban. Con los botones algo más compactos (abajo) caben en 588 y la foto gana 85 px de ancho: en el mockup la foto es grande (753 px de los 1200 del contenedor), no un detalle. */ display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(22px, 2.6vw, 36px) 0 clamp(26px, 3.2vw, 44px); } /* Los botones del hero, algo más compactos: en el mockup caben los dos en la columna de texto. */ .hero-actions .btn { padding: 13px 22px; font-size: .82rem; } .hero-copy .lead { margin: 16px 0 24px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; } /* Nota de apoyo bajo los botones: quita el vacío entre los CTA y la fila de datos y da contexto (la primera visita incluye valoración, como se cuenta en la ficha de EMS). */ .hero-nota { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; color: var(--gris-texto); font-size: .84rem; } .hero-nota .ic { color: var(--violeta); } /* Fila de datos del hero: separada por una línea fina y con divisores entre items para que se lea como un bloque intencionado y no como tres cosas sueltas. */ .hero-stats { display: flex; flex-wrap: wrap; gap: clamp(16px, 2vw, 26px); border-top: 1px solid var(--borde); padding-top: 20px; } .hero-stat { display: flex; align-items: center; gap: 12px; } .hero-stat + .hero-stat { border-left: 1px solid var(--borde); padding-left: clamp(16px, 2vw, 26px); } .hero-stat .icon-badge { width: 42px; height: 42px; background: rgba(124, 58, 237, .12); } .hero-stat b { display: block; font-size: 1.05rem; line-height: 1.1; } .hero-stat span { font-size: .78rem; color: var(--gris-texto); } /* Titular del hero con la jerarquía que tiene el mockup (medido sobre la imagen, no a ojo): «CADA» es la línea PEQUEÑA —24 px de altura de mayúscula frente a los 35 de IMPULSO— y va con mucho más espaciado entre letras, así que el titular no es un bloque plano de tres líneas iguales. IMPULSO y CUENTA comparten cuerpo. */ .hero-copy h1 .h1-l1 { font-size: .68em; letter-spacing: .17em; font-weight: 800; } /* El único adorno del titular en el mockup: el trazo de pincel morado bajo «CUENTA.». Reutiliza el mismo lenguaje de trazo que la firma manuscrita y el titular del CTA final. */ .hero-copy h1 em { position: relative; display: inline-block; } .hero-copy h1 em::after { content: ""; position: absolute; left: -1.5%; right: -2%; bottom: -.05em; height: .075em; background: var(--violeta); border-radius: 60% 40% 55% 45%; transform: rotate(-1deg); opacity: .9; } /* ---------- Hero: foto a sangre ---------- En el mockup el hero es una FOTO sin marco: el fondo claro del gimnasio se funde con el blanco de la página y la imagen sigue hasta el borde derecho de la ventana. Nada de tarjeta oscura ni de adornos: la firma manuscrita y los rayos ya vienen dentro de la foto. */ .hero-visual { position: relative; /* Alineada con los márgenes de la página: la foto acaba exactamente donde acaba el contenedor (el mismo borde que el botón «Reserva tu sesión» de la cabecera). Nada de salirse a la ventana: en pantallas anchas aquello dejaba la foto colgando fuera de la maqueta. El margen izquierdo negativo le deja comerse el hueco entre columnas para ganar tamaño. */ margin-left: calc(clamp(0px, 4vw, 56px) * -1); } .hero-visual .foto { width: min(760px, 100%); margin-left: auto; } .hero-visual .foto img { display: block; width: 100%; height: auto; /* Difuminado hacia la izquierda: la foto se funde con el blanco de la página y no se ve el recorte rectangular al lado del texto (el fondo de la foto no es blanco puro). */ -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 11%, #000 30%); mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 11%, #000 30%); } .hero-visual picture { display: block; } /* Resplandor morado detrás del atleta: profundidad de estudio (el mockup lo tiene). */ .hero-visual::before { content: ""; position: absolute; inset: 2% -5% 0 -12%; z-index: -1; background: radial-gradient(46% 44% at 60% 46%, rgba(124, 58, 237, .22), transparent 72%); } /* El claim manuscrito del mockup: 4 líneas grandes, en el centro-derecha de la foto, en negro y con dos trazos de pincel morados (uno bajo «MAGIA» y otro bajo «RESULTADO»). */ .hero-firma { position: absolute; right: 2%; top: 50%; transform: translateY(-50%) rotate(-2.5deg); text-align: left; pointer-events: none; font-size: clamp(1.6rem, 2.7vw, 2.5rem); color: var(--negro); text-transform: uppercase; letter-spacing: .01em; line-height: .92; } .hero-firma::before { content: ""; position: absolute; left: 0; width: 56%; top: 1.72em; height: 5px; background: var(--violeta); border-radius: 60% 40% 55% 45%; transform: rotate(-1.2deg); opacity: .85; } .hero-firma::after { content: ""; position: absolute; left: 2%; right: 10%; bottom: 1px; height: 5px; background: var(--violeta); border-radius: 60% 40% 55% 45%; transform: rotate(-1.4deg); opacity: .85; } @media (max-width: 900px) { .hero-firma { top: 50%; right: 4%; font-size: clamp(1.2rem, 4.5vw, 1.9rem); } } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero-visual { order: -1; margin-left: 0; } } /* ---------- Objetivos ---------- Como el mockup: NADA de fotos. Tarjeta gris claro con el icono morado grande arriba, el título en negrita y el subtítulo en gris, todo centrado. */ .obj-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .obj-card { background: var(--gris-fondo); border-radius: var(--radius); padding: 26px 20px; text-align: center; transition: transform .22s ease, box-shadow .22s ease, background .22s ease; display: flex; flex-direction: column; align-items: center; } .obj-card:hover { transform: translateY(-6px); box-shadow: var(--sombra); background: #fff; } .obj-ico { color: var(--violeta); display: block; margin-bottom: 10px; } .obj-ico .ic { width: 40px; height: 40px; stroke-width: 1.6; } .obj-card h3 { font-size: 1.02rem; margin-bottom: 6px; } .obj-card p { color: var(--gris-texto); font-size: .9rem; } @media (max-width: 900px) { .obj-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .obj-grid { grid-template-columns: 1fr; } } /* ---------- Qué es ---------- Como el mockup: la foto del atleta va SIN marco ni tarjeta oscura (el fondo claro de la foto se funde con la sección) y la lista de la derecha lleva el icono en círculo morado. */ .que-grid { display: grid; grid-template-columns: 1fr .9fr 1fr; gap: clamp(22px, 2.6vw, 40px); align-items: center; } .que-visual { position: relative; } /* El blanco del fondo de la foto está horneado al color de la sección (--gris-fondo) al instalar la imagen: así no se ve ningún recuadro. Ojo: si cambia el gris, hay que regenerar el asset (scripts/install del kit), no basta con tocar el CSS. */ .que-visual img { width: 100%; height: auto; display: block; } .que-visual::before { content: ""; position: absolute; inset: 10% 0 0; z-index: -1; background: radial-gradient(58% 52% at 50% 42%, rgba(124, 58, 237, .18), transparent 70%); } /* Trazos diagonales morados (los del mockup, entre el texto y la foto). */ .que-visual::after { content: ""; position: absolute; left: -12px; top: 16%; width: 7px; height: 70px; background: var(--violeta); opacity: .85; transform: skewX(-20deg); box-shadow: -16px 26px 0 0 rgba(124, 58, 237, .35); } .que-lista { display: grid; gap: 16px; } .que-item { display: flex; gap: 14px; align-items: flex-start; } .que-item .icon-badge { width: 42px; height: 42px; background: rgba(124, 58, 237, .12); } .que-item h3 { font-size: 1rem; margin-bottom: 3px; } .que-item p { color: var(--gris-texto); font-size: .9rem; } @media (max-width: 1020px) { .que-grid { grid-template-columns: 1fr 1fr; } .que-visual { grid-column: 1 / -1; order: -1; } .que-visual::after { display: none; } } @media (max-width: 620px) { .que-grid { grid-template-columns: 1fr; } } /* ---------- Servicios (tarjetas apaisadas, como el mockup) ---------- Mitad izquierda: título + círculo con la flecha debajo + claim, sobre el negro de la tarjeta. Mitad derecha: la foto, fundida con el negro por su borde izquierdo (sin corte recto). */ .serv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .serv-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/10; background: linear-gradient(90deg, #0A0A0A 0%, #15151A 100%); display: flex; flex-direction: column; justify-content: space-between; padding: 18px; color: #fff; isolation: isolate; transition: transform .22s ease, box-shadow .22s ease; } .serv-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(124,58,237,.28); } /* La foto se funde con el negro con una MÁSCARA (alfa), no con una capa opaca: con una capa negra pegada al borde de la caja quedaba una línea vertical visible al hacer zoom en el hover. */ .serv-card .foto { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; z-index: -1; overflow: hidden; } .serv-card .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 16%, #000 42%); mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 16%, #000 42%); } .serv-card:hover .foto img { transform: scale(1.05); } .serv-card .foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,.5) 0%, rgba(10,10,10,.12) 40%, rgba(10,10,10,0) 88%); } .serv-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 56%; } .serv-card h3 { font-size: clamp(1.02rem, 1.4vw, 1.25rem); } .serv-flecha { width: 34px; height: 34px; border-radius: 50%; flex: none; border: 1.5px solid var(--violeta); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background .22s ease, transform .22s ease; } .serv-card:hover .serv-flecha { background: var(--violeta); transform: rotate(-45deg); } .serv-claim { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; line-height: 1.35; color: rgba(255,255,255,.94); max-width: 58%; } /* Aviso de «primera sesión gratuita»: solo lo lleva el servicio marcado en config (hoy EMS, porque el cliente quiere que ese dato se vea —y se hable— solo en su apartado). Dos variantes porque se usa sobre fondo claro (ficha) y sobre tarjeta oscura (home y /servicios). */ .badge-gratis { display: inline-flex; align-items: center; gap: 8px; background: rgba(124, 58, 237, .1); border: 1px solid rgba(124, 58, 237, .32); color: var(--violeta-osc); border-radius: 999px; padding: 7px 15px; font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } .badge-gratis.inv { background: rgba(167, 139, 250, .16); border-color: rgba(167, 139, 250, .48); color: #DDD6FE; } .serv-claim .badge-gratis { margin-top: 8px; letter-spacing: .08em; } /* Solo en /servicios: dentro de la misma tarjeta va también el párrafo descriptivo. */ .serv-detalle { max-width: 52%; } .serv-detalle p { color: rgba(255,255,255,.86); font-size: .9rem; margin-bottom: 12px; } /* 4 columnas solo cuando caben de verdad: por debajo de 1100 px las tarjetas se quedan en 221 px y el claim largo («CUIDA TU IMAGEN. POTENCIA TU CONFIANZA.») ya no cabe. */ @media (max-width: 1100px) { .serv-grid { grid-template-columns: repeat(2, 1fr); } } /* /servicios: 2 columnas de tarjetas anchas (la medida la fija .dos, no un style inline). OJO con el orden: esta regla tiene la misma especificidad que la de la media de 620 px, así que si fuese DESPUÉS ganaría por orden y en el móvil seguirían saliendo 2 columnas de 169 px con el texto cortado («Activa todos los…»). Va antes, y la de móvil la deja en 1 columna. */ .serv-grid.dos { grid-template-columns: repeat(2, 1fr); } @media (max-width: 620px) { .serv-grid, .serv-grid.dos { grid-template-columns: 1fr; } } @media (max-width: 520px) { .serv-card { aspect-ratio: 4/3; } } /* ---------- /servicios: tarjeta del listado con acciones ---------- No es un enlace entero: lleva botones dentro, y un