/* ============================================================= GRANJA IGUARARO — CABECERA, MENU Y PIE Marco del sitio: se carga en todas las paginas. Mobile-first. Movil: barra fina + fila (logo, buscador dentro del panel, cuenta, carrito, hamburguesa). El panel es un cajon a pantalla completa con las categorias como lista. Escritorio (1200+; por debajo se usa el panel movil): menu en linea. ============================================================= */ .gi-header{ position:sticky;top:0;z-index:var(--z-header); background:rgba(251,246,236,.94); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border-bottom:1px solid var(--gi-linea); } /* ---------- BARRA DE ADMINISTRADOR ---------- Con sesion iniciada WordPress fija arriba una barra de 32 px (46 px bajo 783 px). Bajo 601 px deja de ser fija. Los visitantes nunca la ven. */ .admin-bar .gi-header{top:32px} .admin-bar .gi-nav{top:calc(var(--header-h) + 34px + 32px)} @media (max-width:782px){ .admin-bar .gi-header{top:46px} .admin-bar .gi-nav{top:calc(var(--header-h) + 34px + 46px)} } @media (max-width:600px){ .admin-bar .gi-header{top:0} } /* ---------- FRANJA SUPERIOR ---------- Promesas en amarillo miel con texto oscuro (11,7:1). */ .gi-barra{background:var(--gi-miel);color:var(--gi-tinta)} .gi-barra-inner{display:flex;justify-content:center;min-height:34px;align-items:center} .gi-barra-lista{ display:flex;align-items:center;justify-content:center;flex-wrap:wrap; gap:0 var(--s-3); font-size:var(--fs-micro);font-weight:700;letter-spacing:.04em;color:var(--gi-tinta); } .gi-barra-lista li{white-space:nowrap} .gi-barra-lista li + li::before{content:"·";margin-right:var(--s-3)} .gi-barra-lista a{text-decoration:underline;text-underline-offset:3px} .gi-barra-lista a:hover{color:var(--gi-acento-hover)} /* ---------- FILA PRINCIPAL ---------- */ .gi-header-inner{ display:flex;align-items:center;gap:var(--s-3); min-height:68px; } .gi-header-marca{flex:0 0 auto;margin-right:auto} /* Blindaje contra desbordes: un hijo flex ancho empuja a los demas fuera de la pantalla. .gi-header-inner NO lleva max-width:100% (tambien es .gi-contenedor y perderia su tope de 1200 px). */ .gi-header, .gi-header-principal{max-width:100%} .gi-header-inner > *{min-width:0} .gi-header .gi-logo{max-width:100%} .gi-header .gi-logo img{height:27px;width:auto;max-width:100%;object-fit:contain;display:block} @media (min-width:480px){.gi-header .gi-logo img{height:34px}} @media (min-width:1200px){.gi-header .gi-logo img{height:42px}} /* ---------- HAMBURGUESA ---------- */ .gi-header-hamburguesa{ width:46px;height:46px; display:grid;place-items:center; border:1px solid var(--gi-linea);border-radius:var(--radio-sm); } .gi-hamburguesa-icono, .gi-hamburguesa-icono::before, .gi-hamburguesa-icono::after{ content:"";display:block; width:18px;height:2px;background:var(--gi-texto);border-radius:2px; transition:transform .2s var(--ease),opacity .2s var(--ease); } .gi-hamburguesa-icono::before{transform:translateY(-6px)} .gi-hamburguesa-icono::after{transform:translateY(4px)} [aria-expanded="true"] .gi-hamburguesa-icono{background:transparent} [aria-expanded="true"] .gi-hamburguesa-icono::before{transform:rotate(45deg)} [aria-expanded="true"] .gi-hamburguesa-icono::after{transform:translateY(-2px) rotate(-45deg)} /* ---------- PANEL MOVIL ---------- */ .gi-nav{ position:fixed;left:0;right:0;bottom:0; top:calc(var(--header-h) + 34px); z-index:var(--z-menu); padding:var(--s-3) var(--s-3) var(--s-6); background:var(--gi-fondo); overflow-y:auto; transform:translateX(100%);visibility:hidden; transition:transform .28s var(--ease),visibility 0s linear .28s; } .gi-nav.is-abierto{transform:none;visibility:visible;transition:transform .28s var(--ease)} .gi-menu{display:flex;flex-direction:column} .gi-menu-item{border-bottom:1px solid var(--gi-linea);position:relative} .gi-menu-link{ display:block;padding:var(--s-3) 52px var(--s-3) var(--s-2); font-size:1.05rem;font-weight:600; } .gi-menu-link:hover,.gi-menu-link:focus-visible{color:var(--gi-acento)} .gi-menu-link--texto{cursor:default} /* Boton del acordeon: a la derecha de la fila. */ .gi-nav-extra{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-4)} /* ---------- BUSCADOR ---------- */ .gi-header-buscador{display:none} .gi-buscador{display:flex;align-items:center;gap:var(--s-2);width:100%} .gi-buscador-input{ flex:1;min-width:0;min-height:44px;padding:var(--s-2) var(--s-3); background:var(--gi-superficie);color:var(--gi-texto); border:1px solid var(--gi-linea);border-radius:var(--radio-sm); font-size:var(--fs-small); } .gi-buscador-input::placeholder{color:var(--gi-texto-2)} .gi-buscador-input:focus{border-color:var(--gi-ambar)} .gi-buscador-btn{ flex-shrink:0; width:44px;height:44px;display:grid;place-items:center; background:var(--gi-superficie);color:var(--gi-texto-2); border:1px solid var(--gi-linea);border-radius:var(--radio-sm); } .gi-buscador-btn svg{width:18px;height:18px} .gi-buscador-btn:hover{color:var(--gi-texto);border-color:var(--gi-ambar)} /* ---------- ACCIONES ---------- */ .gi-header-acciones{display:flex;align-items:center;gap:var(--s-2);flex-shrink:0} .gi-header-cuenta, .gi-header-carrito{ position:relative; width:46px;height:46px;display:grid;place-items:center; border:1px solid var(--gi-linea);border-radius:var(--radio-sm); color:var(--gi-texto); } .gi-header-cuenta{display:none} .gi-header-cuenta .gi-icono, .gi-header-carrito .gi-icono{width:22px;height:22px} .gi-header-cuenta:hover, .gi-header-carrito:hover{border-color:var(--gi-ambar);color:var(--gi-ambar)} .gi-header-carrito-num{ position:absolute;top:-6px;right:-6px; min-width:20px;height:20px;padding:0 5px; display:grid;place-items:center; background:var(--gi-miel);color:var(--gi-tinta); border-radius:var(--radio-pill); font-size:11px;font-weight:800;line-height:1; } .gi-header-carrito-num.is-vacio{display:none} /* ---------- ESCRITORIO ---------- */ @media (min-width:1200px){ .gi-header-hamburguesa{display:none} .gi-header-marca{margin-right:var(--s-4)} .gi-header-cuenta{display:grid} .gi-nav-extra{display:none} .gi-nav{ position:static;padding:0;background:none;overflow:visible; transform:none;visibility:visible;transition:none; margin-right:auto; } .gi-menu{flex-direction:row;align-items:center;gap:var(--s-1)} .gi-menu-item{border-bottom:0;display:flex;align-items:center} .gi-menu-link{padding:var(--s-3) var(--s-2);font-size:var(--fs-small);white-space:nowrap} } /* Escritorio: el buscador es un boton-icono que despliega el campo. */ .gi-menu-item--solo-movil{display:block} @media (min-width:1200px){ .gi-menu-item--solo-movil{display:none} .gi-header-buscador{display:block;position:relative} .gi-buscador-abrir{ width:46px;height:46px;display:grid;place-items:center; border:1px solid var(--gi-linea);border-radius:var(--radio-sm);color:var(--gi-texto); } .gi-buscador-abrir svg{width:20px;height:20px} .gi-buscador-abrir:hover,.gi-buscador-abrir[aria-expanded="true"]{border-color:var(--gi-ambar);color:var(--gi-ambar)} .gi-buscador-desplegable{ position:absolute;top:calc(100% + var(--s-2));right:0;width:320px; padding:var(--s-2);background:var(--gi-superficie); border:1px solid var(--gi-linea);border-radius:var(--radio);box-shadow:var(--sombra); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .15s var(--ease),transform .15s var(--ease),visibility 0s linear .15s; } .gi-header-buscador.is-abierto .gi-buscador-desplegable{ opacity:1;visibility:visible;transform:none; transition:opacity .15s var(--ease),transform .15s var(--ease); } } .gi-buscador-abrir{display:none} @media (min-width:1200px){.gi-buscador-abrir{display:grid}} @media (min-width:1200px) and (max-width:1359px){ .gi-menu{gap:0} .gi-menu-link{padding-inline:10px} .gi-header-inner{gap:var(--s-2)} .gi-header-acciones{gap:6px} } /* ---------- PIE ---------- Banda oscura de contraste: el negro queda para el pie. */ .gi-footer{ margin-top:0; background:var(--gi-pie);color:var(--gi-texto-pie); position:relative;overflow:hidden; } .gi-footer::before{ content:"";position:absolute;inset:0;pointer-events:none; background:url(../img/stickers/panal-patron.svg) 0 0/52px auto repeat;opacity:.06; } .gi-footer > *{position:relative} .gi-footer-inner{display:grid;gap:var(--s-6);padding-block:var(--s-7)} .gi-footer-tagline{margin-top:var(--s-3);color:var(--gi-texto-pie);font-size:var(--fs-small)} .gi-footer-marca .gi-logo img{height:44px;width:auto} .gi-footer-menu{display:flex;flex-direction:column;gap:var(--s-2)} .gi-footer-menu a,.gi-footer-legal-menu a{color:var(--gi-texto-pie);font-size:var(--fs-small)} .gi-footer-menu a:hover,.gi-footer-legal-menu a:hover{color:var(--gi-miel)} .gi-footer-contacto{ display:flex;flex-direction:column;gap:var(--s-2); font-style:normal;color:var(--gi-texto-pie);font-size:var(--fs-small); } .gi-footer-contacto a:hover{color:var(--gi-miel)} .gi-footer-titulo{font-family:var(--gi-font);font-size:var(--fs-micro);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gi-miel);margin-bottom:var(--s-3)} .gi-footer-legal{ display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:space-between;align-items:center; padding-block:var(--s-4); border-top:1px solid #2A2A2A; color:var(--gi-texto-pie);font-size:var(--fs-micro); } .gi-footer-legal-menu{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);list-style:none;padding:0;margin:0} /* Identidad del vendedor (Ley 1480, art. 50): ocupa su propia linea. */ .gi-footer-identidad,.gi-footer-sic{flex-basis:100%;margin:0} .gi-footer-sic a{color:var(--gi-texto-pie);text-decoration:underline;text-underline-offset:3px} .gi-footer-sic a:hover{color:var(--gi-miel)} @media (min-width:768px){ .gi-footer-inner{grid-template-columns:2fr 1fr 1.2fr} } /* La fila del encabezado necesita mas que los 1200 px del contenedor: el menu (hasta 6 entradas) + buscador + cuenta + carrito. */ @media (min-width:1200px){ .gi-header .gi-header-inner{max-width:1440px} } /* Contador del carrito: rebote al sumar (lo activa interaccion.js). */ .gi-header-carrito.gi-rebote{animation:gi-rebote .6s var(--ease)} @keyframes gi-rebote{0%{transform:scale(1)}30%{transform:scale(1.18) rotate(-6deg)}60%{transform:scale(.96) rotate(3deg)}100%{transform:scale(1)}} .gi-header-carrito-num.gi-sube{animation:gi-sube .5s var(--ease)} @keyframes gi-sube{0%{transform:scale(.4)}60%{transform:scale(1.4)}100%{transform:scale(1)}} @media (max-width:479px){ .gi-barra-lista{flex-wrap:nowrap;gap:0 var(--s-2);letter-spacing:.02em} .gi-barra-lista li:first-child{display:none} .gi-barra-lista li:nth-child(2)::before{content:none} .gi-barra-lista li + li::before{margin-right:var(--s-2)} } /* ===================================================================== Credito KYNETRA — "Pagina hecha por KYNETRA · ¿Quieres una pagina como esta?" OBLIGATORIO en el pie de TODO sitio que entregue el taller (regla 2026-11-10). Va como ultima franja del