/* ══════════════════════════════════════════════════════════════ ADORNÁ TU NEGOCIO — estilos ══════════════════════════════════════════════════════════════ Sección en prueba, todavía no publicada. Ver LEEME.md. La primera mitad de este archivo es la base del sitio (colores, tipografías, nav, pie, botones), copiada de servicios/*.html. Allá va escrita adentro de cada página; acá va aparte porque son tres páginas que comparten todo y no tiene sentido triplicarla. La segunda mitad ("DE ACÁ PARA ABAJO ES PROPIO") es lo nuevo: la grilla de items, la ficha y la calculadora. ══════════════════════════════════════════════════════════════ */ :root{ --negro:#0a0a0a; --amarillo:#FFE600; --cian:#00AEEF; /* El cian de marca da 2,53:1 sobre blanco y el minimo legible es 4,5:1. Este es el mismo celeste pero para TEXTO (5,0:1). El de marca se sigue usando en barras, bordes y franjas, donde el contraste no aplica. */ --cian-texto:#0077A8; --magenta:#EC008C; --blanco:#ffffff; --gris-claro:#f5f5f5; --gris-medio:#e0e0e0; --gris-texto:#444444; --gris-suave:#6b6b6b; --verde-wsp:#25D366; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:'Barlow',sans-serif;color:var(--negro);background:var(--blanco);font-size:16px;line-height:1.6} /* ── Aviso de que la página no está publicada ───────────────── */ .aviso-prueba{ background:repeating-linear-gradient(45deg,#1a1a1a,#1a1a1a 12px,#222 12px,#222 24px); color:var(--amarillo); text-align:center; padding:9px 5%; font-family:'Barlow Condensed',sans-serif; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; border-bottom:2px solid var(--amarillo); } .aviso-prueba span{color:rgba(255,255,255,.6);font-weight:400;letter-spacing:.06em;text-transform:none} /* ── Barra de arriba ───────────────────────────────────────── */ nav{ position:sticky; top:0; background:var(--negro); z-index:1000; padding:0 5%; display:flex; align-items:center; justify-content:space-between; height:64px; border-bottom:2px solid var(--amarillo); } .nav-logo img{height:38px;width:auto;display:block} .nav-links{display:flex;gap:1.6rem;list-style:none;align-items:center} .nav-links a{ color:var(--blanco);text-decoration:none;font-family:'Barlow Condensed',sans-serif; font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase; opacity:.85;transition:opacity .2s,color .2s; } .nav-links a:hover{opacity:1;color:var(--amarillo)} .nav-links a.active{color:var(--amarillo);opacity:1} .nav-cta{ background:var(--amarillo)!important;color:var(--negro)!important;padding:8px 18px; border-radius:2px;font-weight:700!important;opacity:1!important;font-size:13px!important;letter-spacing:.1em; } .nav-cta:hover{background:#ffd000!important} @media(max-width:640px){ nav{padding:0 4%;height:58px} .nav-logo img{height:30px} .nav-links{gap:.7rem} .nav-links a{font-size:12px;letter-spacing:.04em} .nav-cta{padding:7px 12px} .nav-oculto-chico{display:none} } /* ── Encabezado negro ──────────────────────────────────────── */ .hero{ background:var(--negro);padding:56px 5% 48px;position:relative;overflow:hidden; } .hero-bg-lines{ position:absolute;inset:0;opacity:.04; background-image:repeating-linear-gradient(0deg,#fff 0,#fff 1px,transparent 1px,transparent 60px), repeating-linear-gradient(90deg,#fff 0,#fff 1px,transparent 1px,transparent 60px); } .hero-content{position:relative;z-index:2;max-width:1100px;margin:0 auto} .hero-breadcrumb{ font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:.15em; text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:.75rem; } .hero-breadcrumb a{color:var(--amarillo);text-decoration:none} .hero-breadcrumb a:hover{text-decoration:underline} .hero-title{ font-family:'Barlow Condensed',sans-serif;font-size:clamp(2.2rem,5.5vw,4rem);font-weight:900; color:var(--blanco);text-transform:uppercase;letter-spacing:.03em;line-height:1;margin-bottom:.9rem; } .hero-title span{color:var(--cian-texto)} .hero-sub{color:rgba(255,255,255,.65);font-size:1.08rem;font-weight:300;max-width:620px} .hero-accent-line{ position:absolute;bottom:0;left:0;right:0;height:4px; background:linear-gradient(90deg,var(--cian) 0%,var(--magenta) 33%,var(--amarillo) 66%,var(--cian) 100%); } /* ── Piezas sueltas ────────────────────────────────────────── */ .envoltorio{max-width:1100px;margin:0 auto;padding:0 5%} .section-label{ font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--cian-texto);margin-bottom:.4rem; } .section-title{ font-family:'Barlow Condensed',sans-serif;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:900; text-transform:uppercase;letter-spacing:.03em;line-height:1.1;margin-bottom:.5rem; } .section-divider{display:flex;gap:4px;margin-bottom:2rem} .section-divider span{height:3px;display:block;border-radius:1px;width:32px} .btn-primary{ display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--amarillo); color:var(--negro);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1rem; text-transform:uppercase;letter-spacing:.08em;padding:14px 30px;border-radius:2px; text-decoration:none;border:none;cursor:pointer;transition:background .2s,transform .15s; } .btn-primary:hover{background:#ffd000;transform:translateY(-1px)} .btn-wsp{background:var(--verde-wsp);color:#fff} .btn-wsp:hover{background:#1eb955} /* ── Pie ───────────────────────────────────────────────────── */ footer{ background:#050505;padding:2rem 5%;display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:1rem;border-top:1px solid #1a1a1a;margin-top:0; } footer p{color:var(--gris-suave);font-size:.8rem} .footer-cmyk{display:flex;gap:6px;align-items:center} .footer-cmyk span{width:10px;height:10px;border-radius:50%} /* ══════════════════════════════════════════════════════════════ DE ACÁ PARA ABAJO ES PROPIO DE "ADORNÁ TU NEGOCIO" ══════════════════════════════════════════════════════════════ */ /* ── Portada: las secciones ────────────────────────────────── */ .zonas{ display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem; padding:56px 0 20px; } .zona{ display:block;text-decoration:none;color:inherit;background:var(--blanco); border:1.5px solid var(--gris-medio);border-radius:3px;overflow:hidden; transition:border-color .2s,transform .15s,box-shadow .2s; } .zona:hover{border-color:var(--negro);transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.10)} .zona-ilu{background:var(--gris-claro);border-bottom:1.5px solid var(--gris-medio);display:block} .zona-ilu svg{display:block;width:100%;height:auto} /* La zona que ya tiene foto: mismo lienzo de 400x260 que los dibujos. */ .zona-ilu img{display:block;width:100%;height:auto;aspect-ratio:400/260;object-fit:cover} .zona-texto{padding:1.4rem 1.4rem 1.6rem} .zona-texto h3{ font-family:'Barlow Condensed',sans-serif;font-size:1.55rem;font-weight:900;text-transform:uppercase; letter-spacing:.02em;line-height:1.05;margin-bottom:.4rem; } .zona-texto p{color:var(--gris-texto);font-size:.94rem;margin-bottom:.9rem} .zona-flecha{ font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.86rem;letter-spacing:.12em; text-transform:uppercase;color:var(--cian-texto); } .zona-flecha i{transition:transform .2s;display:inline-block} .zona:hover .zona-flecha i{transform:translateX(4px)} /* El "desde" de cada zona: sale del catálogo, es el más barato de todo lo que tiene adentro. Va entre la bajada y la flecha. */ .zona-desde{ display:block;font-family:'Barlow Condensed',sans-serif;font-weight:900; font-size:1.18rem;color:var(--negro);letter-spacing:.01em;margin-bottom:.7rem; } .zona-desde small{ font-family:'Barlow',sans-serif;font-weight:400;font-size:.74rem;letter-spacing:0; color:var(--gris-suave);margin-left:.3rem; } /* La tarjeta de las zonas que faltan. Antes era .zona-proximamente: un cartel gris, punteado y sin clic, que solo decía que la página estaba a medio hacer. Ahora es un WhatsApp de verdad, así que se ve viva: sin dibujo, pero con el mismo borde y el mismo hover que las otras. */ .zona-avisame{ display:flex;align-items:center;background:var(--gris-claro); } .zona-avisame .zona-texto{padding:1.8rem 1.4rem} .zona-avisame h3{color:var(--negro)} .zona-flecha-wsp{color:#25D366} .zona-flecha-wsp i{margin-right:.3rem;font-size:1.05em} /* En la portada los chips van más pegados a las zonas que adentro. */ .rubros-portada{padding-top:30px} .rubros-portada + .zonas{padding-top:26px} /* ── Grilla de items dentro de una sección ─────────────────── */ .items{ display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:1.25rem; padding:44px 0 8px; } /* display:grid le gana al atributo [hidden] del navegador: sin esta regla, al abrir la ficha de un item la grilla se seguía viendo arriba. Es la misma trampa que ya había aparecido con las tarjetas de invitaciones. */ .items[hidden]{display:none} .item{ background:var(--blanco);border:1.5px solid var(--gris-medio);border-radius:3px; overflow:hidden;cursor:pointer;text-align:left;font:inherit;color:inherit;padding:0; display:flex;flex-direction:column;transition:border-color .2s,transform .15s,box-shadow .2s; } .item:hover{border-color:var(--negro);transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.10)} .item:focus-visible{outline:3px solid var(--cian);outline-offset:2px} .item-ilu{background:var(--gris-claro);border-bottom:1.5px solid var(--gris-medio)} .item-ilu svg{display:block;width:100%;height:auto} /* El item que tiene foto en vez de dibujo: se recorta al mismo alto que el lienzo del SVG, para que la grilla quede pareja. */ .item-ilu img,.ficha-ilu img{display:block;width:100%;aspect-ratio:400/260;object-fit:cover} .item-cuerpo{padding:1.05rem 1.1rem 1.2rem;display:flex;flex-direction:column;flex:1} .item-cuerpo h3{ font-family:'Barlow Condensed',sans-serif;font-size:1.24rem;font-weight:900;text-transform:uppercase; letter-spacing:.015em;line-height:1.1;margin-bottom:.35rem; } .item-para{color:var(--gris-texto);font-size:.88rem;line-height:1.45;margin-bottom:.85rem;flex:1} .item-desde{ font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.95rem;letter-spacing:.03em; color:var(--negro);display:flex;align-items:baseline;gap:.4rem; } .item-desde small{ font-family:'Barlow',sans-serif;font-weight:400;font-size:.72rem;letter-spacing:0; color:var(--gris-suave);text-transform:none; } .item-calcular{ margin-top:.8rem;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.8rem; letter-spacing:.12em;text-transform:uppercase;color:var(--cian-texto); } .item-calcular i{transition:transform .2s;display:inline-block} .item:hover .item-calcular i{transform:translateX(4px)} /* La lista que trae el HTML antes de que corra el JS. Se ve solo si el JavaScript falla, y es lo que leen el buscador y la vista previa de WhatsApp, que nunca ejecutan JS. */ .lista-previa{list-style:none;padding:34px 0 0;display:flex;flex-direction:column;gap:.9rem} .lista-previa li{font-size:.92rem;line-height:1.55;color:var(--gris-texto)} .lista-previa strong{color:var(--negro)} .lista-previa em{font-style:normal;font-family:'Barlow Condensed',sans-serif;font-weight:700;color:var(--negro)} .lista-previa a{color:inherit} /* ── Los datos del local, arriba del pie ──────────────────── */ .local{border-top:1.5px solid var(--gris-medio);background:var(--gris-claro);padding:2.6rem 0} .local-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.8rem; } .local-item h4{ font-family:'Barlow Condensed',sans-serif;font-size:.86rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--negro);margin-bottom:.6rem; } .local-item h4 i{color:var(--cian-texto);margin-right:.4rem} .local-item p{color:var(--gris-texto);font-size:.88rem;line-height:1.6} .local-links{margin-top:.7rem;display:flex;flex-wrap:wrap;gap:.4rem 1rem} .local-links a{ font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.82rem; letter-spacing:.08em;text-transform:uppercase;color:var(--cian-texto);text-decoration:none; } .local-links a:hover{text-decoration:underline} .local-estrellas{color:var(--negro)!important} .local-estrellas i{color:#f5b301;margin-right:.25rem} /* ── Cómo tomar la medida ─────────────────────────────────── */ /* En gris claro y con la regla adelante: es una ayuda, no una promesa de venta. Va debajo de las notas de la ficha. */ .medir{ margin-top:1.6rem;background:var(--gris-claro);border-left:3px solid var(--cian); padding:1.1rem 1.2rem;border-radius:0 3px 3px 0; } .medir h4{ font-family:'Barlow Condensed',sans-serif;font-size:.92rem;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--negro);margin-bottom:.7rem; } .medir h4 i{color:var(--cian-texto);margin-right:.4rem} .medir ul{list-style:none;display:flex;flex-direction:column;gap:.55rem} .medir li{ position:relative;padding-left:1.1rem;font-size:.86rem;line-height:1.5; color:var(--gris-texto); } .medir li::before{ content:'';position:absolute;left:0;top:.55em;width:5px;height:5px; border-radius:50%;background:var(--cian); } /* ── El camino de al lado (el alquiler) ────────────────────── */ /* Va despues del boton de pedir. En gris claro y sin borde negro para que no compita con el recuadro del total ni con el boton verde: es una salida alternativa, no el camino principal. */ .consulta{ margin-top:2.4rem;background:var(--gris-claro);border:1.5px solid var(--gris-medio); border-radius:3px;padding:1.4rem 1.5rem; } .consulta h4{ font-family:'Barlow Condensed',sans-serif;font-size:1.15rem;font-weight:900; text-transform:uppercase;letter-spacing:.02em;margin-bottom:.4rem; } .consulta p{color:var(--gris-texto);font-size:.88rem;line-height:1.5;margin-bottom:1rem} .consulta-btn{display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem;padding:.7rem 1.2rem} /* ── "También te puede servir", al final de la ficha ───────── */ /* Las tarjetas son las mismas de la grilla (.item), pero acá son y no