/* Diseños de la plantilla de cliente. Seis ejes, uno por `data-` en el , definidos en src/variants.mjs. El HTML de las veinticinco webs es el mismo: aquí cambia cómo se dibuja. Orden del fichero: piel, forma, ritmo, tipografía, portada, catálogo. Cada bloque toca sólo sus variables cuando puede; se baja a selectores concretos únicamente donde styles.css tiene un valor fijo. */ /* =========================================================== 1. PIEL ===== */ /* El papel, la tinta y las tarjetas. El color de marca del negocio no se toca nunca: la piel es el papel sobre el que ese color se pinta. */ [data-piel="papel"] { --ink:#1d1614; --ink-2:#2b201c; --ink-soft:#3a2d29; --muted:#7c6a62; --paper:#faf5f0; --paper-2:#f3eae2; --card:#fffdfa; --line:#e8dbd0; --line-2:#d9c8bb; } [data-piel="hueso"] { --ink:#16171a; --ink-2:#232528; --ink-soft:#343740; --muted:#6f7480; --paper:#f7f7f4; --paper-2:#eeeeea; --card:#ffffff; --line:#e4e4de; --line-2:#d3d3cb; } [data-piel="arena"] { --ink:#2a1f17; --ink-2:#3a2c20; --ink-soft:#4a392b; --muted:#8a7a68; --paper:#f6efe4; --paper-2:#ece1d0; --card:#fffaf1; --line:#e2d4bf; --line-2:#cfbda3; } [data-piel="niebla"] { --ink:#12161c; --ink-2:#1d232c; --ink-soft:#2e3641; --muted:#6b7583; --paper:#f4f6f8; --paper-2:#e8ecf1; --card:#ffffff; --line:#dfe4ea; --line-2:#c9d1da; } [data-piel="tinta"] { --ink:#f4ece4; --ink-2:#e8ddd2; --ink-soft:#cdbfb3; --muted:#9b8c81; --paper:#16110f; --paper-2:#1e1815; --card:#221b17; --line:#332923; --line-2:#463932; } [data-piel="pizarra"] { --ink:#eef1f4; --ink-2:#dfe4e9; --ink-soft:#c2cad3; --muted:#8c98a5; --paper:#171b1f; --paper-2:#1f242a; --card:#232930; --line:#2e353d; --line-2:#3e4750; } /* Las pieles oscuras: styles.css da por hecho papel claro en las sombras, los cristales y los degradados, así que se corrigen aquí. Sin esto salen cajas blancas flotando sobre el fondo oscuro. */ [data-piel="tinta"], [data-piel="pizarra"] { color-scheme:dark } [data-piel="tinta"] body, [data-piel="pizarra"] body { background:var(--paper) } [data-piel="tinta"] .site-header.scrolled, [data-piel="pizarra"] .site-header.scrolled { background:rgba(0,0,0,.55); box-shadow:0 8px 30px rgba(0,0,0,.45) } [data-piel="tinta"] .badge, [data-piel="pizarra"] .badge, [data-piel="tinta"] .note, [data-piel="pizarra"] .note, [data-piel="tinta"] .svc-preview .cap, [data-piel="pizarra"] .svc-preview .cap { background:rgba(20,20,22,.82); color:var(--ink); border-color:rgba(255,255,255,.08); } [data-piel="tinta"] .note b, [data-piel="pizarra"] .note b { color:var(--ink) } [data-piel="tinta"] .hero-photo, [data-piel="pizarra"] .hero-photo, [data-piel="tinta"] .svc-preview, [data-piel="pizarra"] .svc-preview { box-shadow:0 40px 80px rgba(0,0,0,.55); } [data-piel="tinta"] .btn-ghost, [data-piel="pizarra"] .btn-ghost { border-color:var(--line-2); color:var(--ink) } [data-piel="tinta"] .logo i, [data-piel="pizarra"] .logo i { background:var(--accent); color:#fff } [data-piel="tinta"] .menu .lang a.on, [data-piel="pizarra"] .menu .lang a.on { background:var(--accent); color:#fff } [data-piel="tinta"] .alt, [data-piel="pizarra"] .alt { background:var(--paper-2) } /* Papel y arena llevan una trama muy suave; en las demás el fondo es liso. Es un degradado, no una imagen: no pesa nada y no hay que servir archivo. */ [data-piel="papel"] body, [data-piel="arena"] body { background-image: radial-gradient(circle at 12% 8%, rgba(var(--accent-rgb),.05), transparent 45%), radial-gradient(circle at 88% 30%, rgba(var(--accent2-rgb),.045), transparent 40%); background-attachment:fixed; } /* ========================================================== 2. FORMA ===== */ /* Esquinas. styles.css trae los radios escritos a mano, así que se sobreescriben los que de verdad dibujan la silueta de la página. */ [data-forma="suave"] { --r-xl:28px; --r-lg:24px; --r-md:16px; --r-sm:12px; --r-btn:999px } [data-forma="recta"] { --r-xl:0; --r-lg:0; --r-md:0; --r-sm:0; --r-btn:0 } [data-forma="capsula"]{ --r-xl:40px; --r-lg:34px; --r-md:22px; --r-sm:999px;--r-btn:999px } /* "arco" redondea sólo por arriba: una puerta, no una pastilla. */ [data-forma="arco"] { --r-xl:200px 200px 18px 18px; --r-lg:160px 160px 14px 14px; --r-md:14px; --r-sm:10px; --r-btn:999px } [data-forma] .hero-photo, [data-forma] .svc-preview { border-radius:var(--r-xl) } [data-forma] .book-card, [data-forma] .member img, [data-forma] .member i, [data-forma] .gal-track > *, [data-forma] .car-track > * { border-radius:var(--r-lg) } [data-forma] .badge, [data-forma] .note, [data-forma] .review, [data-forma] .collage img, [data-forma] .logo i { border-radius:var(--r-md) } [data-forma] .btn, [data-forma] .pill, [data-forma] .svc-preview .cap { border-radius:var(--r-btn) } [data-forma="recta"] .svc .go, [data-forma="recta"] .avs i, [data-forma="recta"] .badge .dot, [data-forma="recta"] .hero .eyebrow .live { border-radius:0 } [data-forma="recta"] .lang { border-radius:0 } [data-forma="recta"] .stage-ring { display:none } /* En arco, el anillo giratorio del fondo choca con la silueta de puerta. */ [data-forma="arco"] .stage-ring { display:none } [data-forma="arco"] .member img, [data-forma="arco"] .member i { border-radius:999px 999px 12px 12px } /* ========================================================== 3. RITMO ===== */ /* Cuánto se mueve la página y con qué curva. `--reveal` es la distancia que recorre cada bloque al aparecer. */ [data-ritmo="calmo"] { --ease:cubic-bezier(.22,.61,.36,1); --dur:.9s; --reveal:26px } [data-ritmo="preciso"] { --ease:cubic-bezier(.4,0,.2,1); --dur:.45s; --reveal:14px } [data-ritmo="fluido"] { --ease:cubic-bezier(.16,1,.3,1); --dur:1.2s; --reveal:40px } [data-ritmo="seco"] { --ease:cubic-bezier(.2,.9,.3,1); --dur:.3s; --reveal:8px } [data-ritmo] .reveal { transition-duration:var(--dur) } [data-ritmo] .reveal:not(.in) { transform:translateY(var(--reveal)) } [data-ritmo="seco"] .marq-track { animation-duration:26s } [data-ritmo="fluido"] .marq-track { animation-duration:60s } [data-ritmo="seco"] .hero-photo img { transition-duration:4s } [data-ritmo="seco"] .orb, [data-ritmo="preciso"] .orb { display:none } [data-ritmo="seco"] .cursor-glow { display:none } @media (prefers-reduced-motion:reduce) { [data-ritmo] * { animation-duration:.01ms !important; transition-duration:.01ms !important } } /* ===================================================== 4. TIPOGRAFÍA ===== */ /* Ajustes por pareja. Las familias las inyecta render.mjs en :root; aquí sólo va lo que cada letra necesita para sentarse bien. */ [data-tipo="cartel"] h1, [data-tipo="cartel"] h2 { letter-spacing:-.03em; text-transform:uppercase; line-height:.95 } [data-tipo="cartel"] h1 em { font-style:normal; text-decoration:underline; text-decoration-thickness:.08em; text-underline-offset:.12em } [data-tipo="grotesca"] h1, [data-tipo="grotesca"] h2, [data-tipo="grotesca"] h3 { letter-spacing:-.035em; font-weight:600 } [data-tipo="grotesca"] h1 em { font-style:normal; color:var(--accent) } [data-tipo="cormorant"] { font-size:17.5px } [data-tipo="cormorant"] h1 { font-size:clamp(3rem,7vw,5.4rem); letter-spacing:0; line-height:1 } [data-tipo="cormorant"] h2 { letter-spacing:0 } [data-tipo="garamond"] h1, [data-tipo="garamond"] h2 { letter-spacing:-.005em } [data-tipo="pizarra"] h1, [data-tipo="pizarra"] h2 { letter-spacing:-.015em; line-height:1.08 } [data-tipo="alegreya"] h1 em { font-style:italic } [data-tipo="literata"] h1 { line-height:1.08 } /* ======================================================== 5. PORTADA ===== */ /* --- estudio: la de origen. Copia a la izquierda, foto flotante a la derecha. No necesita nada porque es lo que hace styles.css. --- */ /* --- portada: foto a sangre detrás del titular, a pantalla casi completa. La foto sale del `.stage` y se coloca de fondo; la copia va encima. --- */ [data-portada="portada"] .hero { padding:0; min-height:min(92vh,880px); display:grid; align-items:end } [data-portada="portada"] .hero-grid { grid-template-columns:1fr; padding-block:clamp(60px,12vw,140px); max-width:min(1180px,100% - 40px) } [data-portada="portada"] .stage { position:absolute; inset:0; z-index:0; max-height:none; aspect-ratio:auto; opacity:1; transform:none; } [data-portada="portada"] .hero-photo { position:absolute; inset:0; border-radius:0; box-shadow:none; transform:none } [data-portada="portada"] .hero-photo::after { background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.35) 40%,rgba(0,0,0,.78) 100%); } [data-portada="portada"] .hero-copy { position:relative; z-index:2; color:#fff } /* El titular se corta solo; el limite va en el h1 y no en el bloque, porque si no arrastraba tambien al parrafo y salia una palabra por linea. */ [data-portada="portada"] .hero-copy h1 { max-width:min(16ch,100%) } /* Sobre la foto, el trozo en cursiva no puede ir del color de marca: encima de una foto oscura no se lee. Se distingue por claridad, no por color. */ [data-portada="portada"] .hero h1 em { color:#fff; opacity:.72 } [data-portada="portada"] .hero-copy h1, [data-portada="portada"] .hero-copy .lead, [data-portada="portada"] .hero-copy .eyebrow, [data-portada="portada"] .hero-copy .rating { color:#fff } [data-portada="portada"] .hero-copy .lead { max-width:46ch; opacity:.92 } [data-portada="portada"] .hero-copy h1 { font-size:clamp(2.8rem,6.5vw,5rem) } [data-portada="portada"] .btn-ghost { border-color:rgba(255,255,255,.75); color:#fff } [data-portada="portada"] .badge, [data-portada="portada"] .note, [data-portada="portada"] .pill { display:none } [data-portada="portada"] .stage-ring { display:none } [data-portada="portada"] .orb { display:none } /* --- revista: dos columnas iguales, titular muy grande, foto alta y recortada. Nada flota: todo se alinea a una retícula. --- */ [data-portada="revista"] .hero { padding-top:clamp(20px,3vw,40px) } [data-portada="revista"] .hero-grid { grid-template-columns:1fr 1fr; align-items:start; gap:clamp(24px,4vw,56px) } [data-portada="revista"] .hero-copy h1 { font-size:clamp(2.6rem,6vw,4.6rem); margin-bottom:.35em } [data-portada="revista"] .hero-copy .lead { max-width:38ch; border-left:2px solid var(--accent); padding-left:18px } [data-portada="revista"] .stage { aspect-ratio:3/4.2; max-height:none; perspective:none } [data-portada="revista"] .hero-photo { transform:none; box-shadow:none; border:1px solid var(--line-2) } [data-portada="revista"] .stage-ring, [data-portada="revista"] .orb, [data-portada="revista"] .pill { display:none } [data-portada="revista"] .note { display:none } /* --- franja: titular centrado sobre una banda del color del negocio, y la foto a lo ancho debajo. La más "escaparate". --- */ [data-portada="franja"] .hero { padding:0 } [data-portada="franja"] .hero-grid { grid-template-columns:1fr; gap:0 } [data-portada="franja"] .hero-copy { background:var(--accent); color:#fff; text-align:center; padding:clamp(48px,8vw,96px) clamp(20px,5vw,60px) clamp(56px,9vw,104px); margin-inline:calc(50% - 50vw); padding-inline:max(20px,calc(50vw - 560px)); } [data-portada="franja"] .hero-copy h1, [data-portada="franja"] .hero-copy .lead, [data-portada="franja"] .hero-copy .eyebrow { color:#fff } [data-portada="franja"] .hero-copy h1 em { color:#fff; opacity:.72 } [data-portada="franja"] .hero-copy .lead { max-width:52ch; margin-inline:auto; opacity:.93 } [data-portada="franja"] .cta-row { justify-content:center } [data-portada="franja"] .btn-primary { background:#fff; color:var(--accent-ink) } [data-portada="franja"] .btn-ghost { border-color:rgba(255,255,255,.7); color:#fff } [data-portada="franja"] .rating { justify-content:center } [data-portada="franja"] .stage { aspect-ratio:21/8; max-height:none; margin-top:0; perspective:none } [data-portada="franja"] .hero-photo { border-radius:0; transform:none; box-shadow:none } [data-portada="franja"] .stage-ring, [data-portada="franja"] .orb, [data-portada="franja"] .note, [data-portada="franja"] .pill { display:none } /* --- ficha: todo dentro de una tarjeta centrada, flotando sobre el fondo. Funciona bien en negocios de una sola persona. --- */ [data-portada="ficha"] .hero { padding-block:clamp(28px,5vw,64px) } [data-portada="ficha"] .hero-grid { grid-template-columns:1fr; max-width:min(880px,100% - 40px); text-align:center; background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl,28px); padding:clamp(34px,6vw,64px) clamp(24px,5vw,56px); box-shadow:0 30px 70px rgba(0,0,0,.08); } [data-portada="ficha"] .hero-copy { max-width:56ch; margin-inline:auto } [data-portada="ficha"] .hero-copy .lead { margin-inline:auto } [data-portada="ficha"] .cta-row, [data-portada="ficha"] .rating, [data-portada="ficha"] .hero .eyebrow { justify-content:center } [data-portada="ficha"] .stage { aspect-ratio:16/7; max-height:none; margin-top:26px; perspective:none } [data-portada="ficha"] .hero-photo { transform:none } [data-portada="ficha"] .stage-ring, [data-portada="ficha"] .orb, [data-portada="ficha"] .note, [data-portada="ficha"] .pill { display:none } /* ======================================================= 6. CATÁLOGO ===== */ /* --- lista: filas, el de origen. Sin reglas. --- */ /* --- tarjetas: cada servicio en su propia tarjeta. Desaparece la foto de al lado, porque la rejilla ya ocupa todo el ancho. --- */ [data-catalogo="tarjetas"] .svc-grid { grid-template-columns:1fr } [data-catalogo="tarjetas"] .svc-preview { display:none } [data-catalogo="tarjetas"] .services { border-top:0; display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)) } [data-catalogo="tarjetas"] .svc { grid-template-columns:1fr auto; grid-template-areas:"n go" "h h" "p p" "d price"; border:1px solid var(--line-2); border-bottom:1px solid var(--line-2); border-radius:var(--r-md,16px); padding:22px; gap:8px 14px; align-items:start; } [data-catalogo="tarjetas"] .svc .n { grid-area:n } [data-catalogo="tarjetas"] .svc .go { grid-area:go } [data-catalogo="tarjetas"] .svc h3 { grid-area:h; font-size:1.25rem } [data-catalogo="tarjetas"] .svc p { grid-area:p } [data-catalogo="tarjetas"] .svc .dur { grid-area:d; align-self:end } [data-catalogo="tarjetas"] .svc .price { grid-area:price; align-self:end } [data-catalogo="tarjetas"] .svc:hover { background:var(--card); border-color:var(--accent) } /* --- carta: nombre a la izquierda, precio a la derecha y una línea de puntos entre los dos, como la carta de un restaurante. La línea es un pseudo-elemento de la fila y no del titular: así crece justo el hueco que queda libre, sea cual sea el largo del nombre. --- */ [data-catalogo="carta"] .svc-grid { grid-template-columns:1fr } [data-catalogo="carta"] .svc-preview { display:none } [data-catalogo="carta"] .services { border-top:0; columns:2; column-gap:clamp(30px,5vw,70px) } [data-catalogo="carta"] .svc { display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"h puntos precio" "desc desc desc" "dur dur dur"; align-items:baseline; gap:0 6px; break-inside:avoid; border-bottom:0; padding:13px 0; cursor:pointer; } [data-catalogo="carta"] .svc::after { content:""; grid-area:puntos; border-bottom:1px dotted var(--line-2); transform:translateY(-3px); } [data-catalogo="carta"] .svc .n, [data-catalogo="carta"] .svc .go, [data-catalogo="carta"] .svc .thumb { display:none } [data-catalogo="carta"] .svc h3 { grid-area:h; font-size:1.1rem; margin:0 } [data-catalogo="carta"] .svc .price { grid-area:precio; text-align:right; min-width:0 } [data-catalogo="carta"] .svc .price b { font-size:1.1rem } [data-catalogo="carta"] .svc p { grid-area:desc; font-size:.88rem; margin-top:3px } [data-catalogo="carta"] .svc .dur { grid-area:dur; margin-top:1px } [data-catalogo="carta"] .svc:hover { background:transparent; padding-left:0; padding-right:0 } [data-catalogo="carta"] .svc:hover h3 { transform:none; color:var(--accent-ink) } @media (max-width:760px) { [data-catalogo="carta"] .services { columns:1 } } /* --- bloques: filas anchas con el precio enorme a la derecha. El más contundente; funciona cuando el precio es el argumento. --- */ [data-catalogo="bloques"] .svc-grid { grid-template-columns:1fr } [data-catalogo="bloques"] .svc-preview { display:none } [data-catalogo="bloques"] .services { border-top:2px solid var(--ink) } [data-catalogo="bloques"] .svc { grid-template-columns:1fr auto; border-bottom:1px solid var(--line-2); padding:clamp(20px,3vw,34px) 4px; gap:20px; } [data-catalogo="bloques"] .svc .n, [data-catalogo="bloques"] .svc .go, [data-catalogo="bloques"] .svc .thumb { display:none } [data-catalogo="bloques"] .svc h3 { font-size:clamp(1.4rem,3vw,2.2rem) } [data-catalogo="bloques"] .svc .dur { display:block; margin-top:6px } [data-catalogo="bloques"] .svc .price b { font-size:clamp(1.8rem,4vw,3rem); line-height:1 } [data-catalogo="bloques"] .svc:hover { background:transparent } [data-catalogo="bloques"] .svc:hover h3 { color:var(--accent) } /* ==================================================== retoques finales === */ /* El móvil vuelve casi todo a una columna, así que las portadas que apilan necesitan menos ajuste del que parece. Lo que sí hace falta es que la franja y la portada a sangre no coman toda la pantalla en un teléfono. */ @media (max-width:820px) { [data-portada="portada"] .hero { min-height:min(78vh,620px) } [data-portada="franja"] .stage { aspect-ratio:16/10 } [data-portada="revista"] .hero-grid { grid-template-columns:1fr } [data-portada="revista"] .stage { aspect-ratio:4/3 } [data-catalogo="tarjetas"] .services { grid-template-columns:1fr } }