/* =================================================================== * TOMATE VACACIONES — sistema de diseño * * Sale de las maquetas de evolution/boceto/, aprobadas por el cliente. * * TODAS las clases llevan el prefijo "tv-". No es capricho: el sitio ya * carga Style.css, agosto.css y responsive.css, con nombres como .logo, * .caja o .foto. El prefijo garantiza que este archivo no le pise nada a * los que ya estaban, ni al reves, y que las paginas que todavia no se * rediseñaron sigan viendose igual que siempre. * * Este archivo se carga ULTIMO en Header.php. * * Sobre los colores: el verde y el naranja del boceto del cliente son * muy claros para texto. Se conservan tal cual en superficies * decorativas y se usan variantes un poco mas profundas donde hay que * leer: * naranja #F0741F -> #C4520D en botones y precios (2.91 -> 4.61) * verde #55B248 -> #357D29 en enlaces (2.68 -> 5.10) * banner #55B248 -> #38842B con texto blanco (2.68 -> 4.66) * A simple vista son el mismo verde y el mismo naranja. * =================================================================== */ :root{ --tv-verde:#4FA83D; /* decorativo: iconos, fondos claros */ --tv-verde-texto:#357D29; /* 5.10:1 sobre blanco */ --tv-verde-banner:#38842B; /* 4.66:1 con texto blanco */ --tv-verde-suave:#EAF6E7; --tv-naranja:#F0741F; /* decorativo */ --tv-naranja-fuerte:#C4520D; /* 4.61:1 con blanco */ --tv-naranja-hover:#A8440A; --tv-tinta:#1F2937; --tv-tinta-2:#5B6472; --tv-tinta-3:#6A7280; /* 4.85:1 sobre blanco */ --tv-linea:#E6E9ED; --tv-papel:#FFFFFF; --tv-papel-2:#F7F8FA; --tv-r:12px; --tv-r-g:16px; --tv-sombra:0 1px 2px rgba(31,41,55,.05), 0 6px 18px -8px rgba(31,41,55,.14); --tv-sombra-alta:0 4px 8px rgba(31,41,55,.06), 0 20px 40px -16px rgba(31,41,55,.24); --tv-ancho:1180px; --tv-alto-cab:64px; /* Alto de la barra de busqueda compacta, la que queda pegada abajo de la cabecera. Las dos juntas son la franja fija de arriba: cualquier cosa que se pegue tiene que arrancar DEBAJO de las dos. */ --tv-alto-barra:72px; --tv-alto-fijo:calc(var(--tv-alto-cab) + var(--tv-alto-barra)); } /* Las paginas que no dibujan la barra (la home, las altas, el panel) solo tienen la cabecera arriba. --tv-alto-fijo se declara de nuevo, no alcanza con cambiar --tv-alto-barra: el calc() de :root ya se resolvio ahi contra el valor de :root, y lo que hereda es el resultado, no la formula. */ body.tv-sin-barra{--tv-alto-barra:0px;--tv-alto-fijo:var(--tv-alto-cab)} /* El atributo hidden trae display:none desde el navegador, con especificidad (0,1,0). Cualquier regla propia con la misma especificidad —".tv-x{display:flex}"— le gana por orden y el elemento se sigue viendo aunque este marcado como oculto. */ .tv [hidden]{display:none !important} /* ---------- base ---------- * Va sobre body.tv para no cambiar las paginas que todavia usan el * diseño viejo. Cuando esten todas migradas se puede subir a body. * ------------------------------------------------------------------- */ body.tv{ margin:0;background:var(--tv-papel);color:var(--tv-tinta); font-family:"Poppins","Trebuchet MS",Helvetica,system-ui,sans-serif; font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased; min-width:0; } .tv *{box-sizing:border-box} .tv img{display:block;max-width:100%} /* :where() deja esta regla en especificidad (0,1,0) en vez de (0,1,1). Sin eso le ganaba a .tv-btn-naranja y a .tv-btn-ver, que son : los botones naranjas terminaban con el texto oscuro heredado —3.19:1— en vez del blanco que corresponde. */ .tv :where(a){color:inherit;text-decoration:none} .tv button{font-family:inherit;cursor:pointer} .tv :focus-visible{outline:2px solid var(--tv-verde-texto);outline-offset:2px;border-radius:4px} .tv-caja{max-width:var(--tv-ancho);margin:0 auto;padding:0 22px} .tv-ancho-grande{--tv-ancho:1320px} @media (prefers-reduced-motion: reduce){ .tv *,.tv *::before,.tv *::after{ animation-duration:.01ms !important;transition-duration:.01ms !important; } } /* ---------- logotipo ---------- * Public/Img/logo.png mide 850x220 y trae el personaje en x=0..412 y la * palabra "tomate vacaciones" en BLANCO PURO, hecha para la barra verde * del diseño anterior. Sobre fondo claro esa palabra desaparece, asi que * se recorta el personaje —relacion 412/220 = 1.875— y la palabra se * compone con tipografia. El recorte es por background-size/position: no * se genera ningun archivo nuevo ni se toca el original. * ------------------------------------------------------------------- */ .tv-logo{display:inline-flex;align-items:center;gap:9px} .tv-fruta{ --tv-h:34px; display:block;flex:none;height:var(--tv-h);width:calc(var(--tv-h) * 1.875); background:url("../Img/logo.png") no-repeat left center; background-size:auto var(--tv-h); } .tv-logo .tv-palabra{display:flex;flex-direction:column;line-height:1;color:var(--tv-verde-texto)} .tv-logo .tv-palabra b{font-weight:700;font-size:19px;letter-spacing:-.02em} .tv-logo .tv-palabra i{font-style:italic;font-weight:400;font-size:13.5px;margin-top:1px} /* ---------- cabecera ---------- */ .tv-cab{ border-bottom:1px solid var(--tv-linea);background:#fff; position:sticky;top:0;z-index:70; } .tv-cab .tv-caja{display:flex;align-items:center;gap:22px;height:var(--tv-alto-cab)} /* Style.css:386 tiene un "nav{float:left; min-width:100%; max-height:30px}" suelto, SIN clase, para la barra naranja del diseño anterior. Al ser un selector de ELEMENTO le pega a todos los