/* ========================================================================== ZARZA Corp - el tema. Depende de tokens.css y zarza-brand.css, en ese orden. Aqui NO se define ni un color a mano: todo sale de las variables --zz-*. Indice: 01 base y suelo 06 fichas de catalogo 02 tipografia 07 directorio y filtros 03 medida y rejilla 08 reproductor 04 cabecera 09 comentarios y formularios 05 contenido en ficha 10 pie 11 widgets, utilidades y Elementor ========================================================================== */ /* ============ 01 · base y suelo ========================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; min-height:100vh; font-family:var(--zz-mono); font-size:15px; line-height:1.75; background:var(--zz-rojo); background-image:linear-gradient(176deg,var(--zz-rojo-alto) 0%,var(--zz-rojo) 45%,#980000 100%); background-attachment:fixed; color:var(--zz-sobre-rojo); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* el grano va en un hijo fijo, nunca en el body */ .zz-grano{z-index:0} .zz-envoltorio{position:relative;z-index:2;display:flex;flex-direction:column;min-height:100vh} .zz-principal{flex:1 0 auto;padding:clamp(28px,4vw,56px) 0 clamp(48px,7vw,88px)} img,svg,video,canvas,audio,iframe,embed,object{display:block;max-width:100%} img{height:auto} /* saltar al contenido: primera parada del teclado */ .zz-saltar{position:absolute;inset-inline-start:-9999px;top:0;z-index:999; background:var(--zz-crema);color:var(--zz-rojo);font-family:var(--zz-mono);font-size:12px; font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:12px 18px; border-radius:0 0 var(--zz-radio-chico) 0;text-decoration:none} .zz-saltar:focus{inset-inline-start:0} :focus-visible{outline:2px solid var(--zz-sobre-rojo);outline-offset:3px} .zz-ficha :focus-visible{outline-color:var(--zz-rojo)} ::selection{background:var(--zz-tinta);color:var(--zz-crema)} .zz-ficha ::selection{background:var(--zz-rojo);color:var(--zz-crema)} /* solo para lectores de pantalla */ .zz-oculto{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .zz-oculto:focus{position:static!important;width:auto;height:auto;clip:auto;clip-path:none} /* ============ 02 · tipografia =========================================== */ h1,h2,h3,h4,h5,h6{ font-family:var(--zz-display);font-weight:800;text-transform:lowercase; letter-spacing:var(--zz-tracking-titular);line-height:1.06;margin:0 0 .5em; text-wrap:balance; } h1{font-size:clamp(34px,6vw,72px);letter-spacing:-.05em;line-height:.98} h2{font-size:clamp(26px,3.4vw,42px)} h3{font-size:clamp(21px,2.2vw,27px)} h4{font-size:18px;letter-spacing:-.02em} h5{font-size:15px} h6{font-family:var(--zz-mono);font-weight:600;font-size:11px;letter-spacing:var(--zz-tracking-rotulo); text-transform:uppercase} p{margin:0 0 1.15em} p:last-child{margin-bottom:0} a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px} a:hover{text-decoration-thickness:2px} /* enlaces sobre el rojo: crema; dentro de una ficha: rojo vivo */ .zz-sobre a{color:var(--zz-sobre-rojo)} .zz-ficha a{color:var(--zz-rojo-vivo)} small{font-size:12px} sup,sub{font-size:.72em;line-height:0} hr{border:0;border-top:1px solid var(--zz-linea);margin:2em 0} .zz-sobre hr{border-top-color:var(--zz-borde-sobre-rojo)} code,kbd,samp{font-family:var(--zz-mono);font-size:.92em} /* la rotulacion tecnica: dice hechos, no vende nada */ .zz-rotulo{display:inline-block;font-weight:500} .zz-sobre .zz-rotulo{color:var(--zz-sobre-rojo-3)} .zz-bajada{font-size:clamp(15px,1.5vw,17px);line-height:1.7;color:var(--zz-sobre-rojo-2); max-width:62ch;margin:0} /* ============ 03 · medida y rejilla ===================================== */ .zz-medida{width:min(100% - 44px,var(--zz-ancho));margin-inline:auto} @media (max-width:600px){.zz-medida{width:min(100% - 28px,var(--zz-ancho))}} .zz-rejilla{display:grid;gap:22px} .zz-rejilla[data-cols="2"]{grid-template-columns:repeat(2,1fr)} .zz-rejilla[data-cols="3"]{grid-template-columns:repeat(3,1fr)} .zz-rejilla[data-cols="4"]{grid-template-columns:repeat(4,1fr)} @media (max-width:960px){ .zz-rejilla[data-cols="3"],.zz-rejilla[data-cols="4"]{grid-template-columns:repeat(2,1fr)} } @media (max-width:620px){ .zz-rejilla[data-cols]{grid-template-columns:1fr} } /* pagina con barra lateral */ .zz-con-lateral{display:grid;gap:26px;grid-template-columns:minmax(0,1fr) 320px;align-items:start} @media (max-width:1000px){.zz-con-lateral{grid-template-columns:1fr}} /* la cabecera de una vista, sobre el rojo */ .zz-encabezado{margin:0 0 clamp(22px,3vw,34px)} .zz-encabezado .zz-rotulo{margin-bottom:10px} .zz-encabezado h1{margin-bottom:.35em} /* ============ 04 · cabecera ============================================= */ .zz-cabecera{position:relative;z-index:20;padding:18px 0; border-bottom:1px solid var(--zz-borde-sobre-rojo)} .zz-cabecera.zz-pegada{position:sticky;top:0; background:linear-gradient(180deg,var(--zz-rojo-alto),var(--zz-rojo)); box-shadow:0 10px 30px -18px rgba(20,0,0,.9)} .zz-cab-fila{display:flex;align-items:center;gap:24px} /* el logotipo: 128x46 es donde vive casi siempre. Por debajo de 76px va el simbolo */ .zz-marca{display:inline-flex;align-items:center;gap:12px;flex:none;text-decoration:none; line-height:0} .zz-marca img,.zz-marca svg{width:128px;height:46px;object-fit:contain} .zz-marca .zz-simbolo{display:none;width:38px;height:38px} @media (max-width:420px){ .zz-marca img,.zz-marca svg:not(.zz-simbolo){display:none} .zz-marca .zz-simbolo{display:block} } /* el menu de zonas */ .zz-menu{margin-inline-start:auto} .zz-menu ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0} .zz-menu li{position:relative} .zz-menu a{display:block;font-family:var(--zz-mono);font-size:11px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:9px 12px; border-radius:var(--zz-radio-chico);color:var(--zz-sobre-rojo-2);transition:background .15s,color .15s} .zz-menu a:hover,.zz-menu a:focus-visible{background:rgba(255,240,230,.12);color:var(--zz-sobre-rojo)} .zz-menu .current-menu-item > a,.zz-menu .current_page_item > a, .zz-menu .current-menu-ancestor > a,.zz-menu .current-menu-parent > a{ background:var(--zz-crema);color:var(--zz-rojo)} /* submenus */ .zz-menu .sub-menu{position:absolute;inset-inline-start:0;top:calc(100% + 8px);min-width:210px;display:block; flex-direction:column;gap:0;background:var(--zz-crema);border-radius:var(--zz-radio-chico); padding:6px;box-shadow:var(--zz-sombra-ficha);opacity:0;visibility:hidden;transform:translateY(-4px); transition:opacity .15s,transform .15s,visibility .15s;z-index:30} .zz-menu li:hover > .sub-menu,.zz-menu li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none} .zz-menu .sub-menu a{color:var(--zz-tinta-2);letter-spacing:.08em} .zz-menu .sub-menu a:hover{background:var(--zz-crema-2);color:var(--zz-rojo)} /* 🔴 Los submenus de los ultimos elementos se abren HACIA DENTRO. Un submenu de 210 px anclado al borde izquierdo de su padre se sale de la pantalla cuando el padre esta a la derecha del todo: medido en de.zarza.com, el documento se iba a 1313 px con la ventana en 1280 y aparecia barra horizontal en TODO el sitio. Con la navegacion de prueba no se veia porque no tenia submenus; salio al poner el menu real, que tiene 39 elementos. Se alinean por el otro canto, que es lo que hace cualquier menu de sistema. */ /* ⚠️ El `>` de primer nivel NO vale: la lista que WordPress imprime lleva la clase `menu`, no `zz-menu` --esta va en el