/* ========================================================================= POLIZUNCHO — Footer Panel azul redondeado sobre fondo claro. El pie va al final del documento, en el flujo normal: no se fija, no se revela ni sube por encima del contenido. ========================================================================= */ :root { --pz-footer-inset: clamp(12px, 1.4vw, 24px); /* Aire en blanco entre el final del contenido y el panel azul. */ --pz-footer-gap: clamp(24px, 3vw, 56px); --pz-footer-radius: clamp(20px, 2.4vw, 40px); --pz-footer-pad-x: clamp(20px, 3vw, 56px); --pz-footer-pad-y: clamp(28px, 4vw, 72px); --pz-font-script: "Yellowtail", "Segoe Script", "Brush Script MT", cursive; --pz-rule: rgba(255, 255, 255, .34); } /* ========================================================================= 1. Contenido y pie ========================================================================= */ .pz-page { position: relative; box-sizing: border-box; /* Hueco de la barra fija: va aquí (clase) y no en `body`, porque los estilos globales de WordPress resetean el padding del body. */ padding-top: var(--pz-header-h, 0px); background: var(--pz-page-bg, #fff); /* En páginas cortas evita que el pie suba a media pantalla. */ min-height: 100vh; min-height: 100svh; } .pz-footer { /* El aire va como padding y no como margin del panel, para que no se colapse con el contenido ni se escape del . */ padding-top: var(--pz-footer-gap); padding-bottom: var(--pz-footer-inset); /* Siempre blanco: el pie no sigue el gris de las páginas de WooCommerce. */ background: var(--pz-white, #fff); } /* ========================================================================= 2. Panel azul ========================================================================= */ .pz-footer__panel { margin: 0 var(--pz-footer-inset); padding: var(--pz-footer-pad-y) var(--pz-footer-pad-x) clamp(20px, 2vw, 32px); border-radius: var(--pz-footer-radius); background: var(--pz-navy, #01356a); color: #fff; } .pz-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; } /* ========================================================================= 3. Bloque de marca (logo + claim + imagen) ========================================================================= */ .pz-footer__brand { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 52px); min-width: 0; } .pz-footer__logo { line-height: 0; } .pz-logo--footer img { height: clamp(40px, 3.8vw, 68px); } .pz-claim { margin: 0; color: #fff; line-height: 1.02; } .pz-claim__line1 { display: block; font-size: clamp(30px, 3.6vw, 66px); font-weight: 800; letter-spacing: -.015em; } .pz-claim__line2 { display: block; /* La cursiva trae mucho aire arriba y a la izquierda: se compensa para que quede pegada a la primera línea, como en el diseño. */ margin-top: -.14em; margin-left: -.04em; color: var(--pz-teal, #00a7a9); font-family: var(--pz-font-script); font-weight: 400; font-size: clamp(34px, 4.1vw, 76px); line-height: 1.06; } .pz-footer__media { margin: 0; } .pz-footer__img, .pz-footer__media img { display: block; width: 100%; max-width: 457px; height: auto; border-radius: 14px; object-fit: cover; } /* ========================================================================= 4. Columnas (Páginas · Categorías / Contáctanos · Síguenos) ========================================================================= */ .pz-footer__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 2.6vw, 48px); row-gap: clamp(30px, 3.4vw, 60px); min-width: 0; /* Las columnas arrancan algo más abajo que el logo, como en el diseño. */ padding-top: clamp(0px, 3.2vw, 58px); } .pz-fcol { min-width: 0; padding-top: clamp(18px, 1.8vw, 30px); border-top: 1px solid var(--pz-rule); } .pz-fcol__title { margin: 0 0 clamp(14px, 1.4vw, 24px); color: #fff; font-size: clamp(15px, 1.05vw, 18px); font-weight: 700; line-height: 1.2; } .pz-fcol__empty { margin: 0; color: rgba(255, 255, 255, .7); font-size: 14px; line-height: 1.5; } .pz-footer a { color: rgba(255, 255, 255, .92); text-decoration: none; transition: color .2s var(--pz-ease, ease); } .pz-footer a:hover, .pz-footer a:focus-visible { color: var(--pz-teal, #00a7a9); text-decoration: none; } /* — Páginas — */ .pz-flinks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: clamp(12px, 1.1vw, 20px); } .pz-flinks li { margin: 0; } .pz-flinks a { font-size: clamp(14px, .95vw, 16px); line-height: 1.3; } .pz-flinks .current-menu-item > a, .pz-flinks .current_page_item > a { color: var(--pz-teal, #00a7a9); font-weight: 600; } /* — Categorías (padre + hijas en viñetas) — */ /* La lista crece con el catálogo, así que se limita el alto y el resto se ve con la barra de scroll: el pie no se dispara y las columnas quedan parejas. */ .pz-ftree { margin: 0; padding: 0 12px 0 0; list-style: none; display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 26px); max-height: var(--pz-ftree-max, clamp(180px, 24vh, 230px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .45) rgba(255, 255, 255, .14); } .pz-ftree::-webkit-scrollbar { width: 6px; } .pz-ftree::-webkit-scrollbar-track { background: rgba(255, 255, 255, .14); border-radius: 999px; } .pz-ftree::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .45); border-radius: 999px; } .pz-ftree::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .68); } .pz-ftree__parent { display: inline-block; margin-bottom: 6px; font-size: clamp(14px, .95vw, 16px); font-weight: 500; line-height: 1.3; } .pz-ftree__children { margin: 0; padding-left: 20px; list-style: disc; display: flex; flex-direction: column; gap: 8px; } .pz-ftree__children li { margin: 0; color: rgba(255, 255, 255, .92); font-size: clamp(13px, .9vw, 15px); line-height: 1.35; } .pz-ftree__children::marker, .pz-ftree__children li::marker { color: rgba(255, 255, 255, .92); } /* — Contáctanos — */ .pz-fcontact { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: clamp(14px, 1.3vw, 22px); } .pz-fcontact__item { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 12px; color: rgba(255, 255, 255, .92); font-size: clamp(13px, .92vw, 15px); line-height: 1.45; } .pz-fcontact__ico { display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; color: #fff; } .pz-fcontact__ico svg { display: block; } /* — Síguenos — */ .pz-fsocial { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: clamp(14px, 1.3vw, 22px); } .pz-fsocial__link { display: inline-flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .92); font-size: clamp(13px, .92vw, 15px); line-height: 1.3; } .pz-fsocial__ico { display: inline-flex; align-items: center; justify-content: center; width: 24px; color: #fff; transition: color .2s var(--pz-ease, ease); } a.pz-fsocial__link:hover .pz-fsocial__ico, a.pz-fsocial__link:focus-visible .pz-fsocial__ico { color: var(--pz-teal, #00a7a9); } /* ========================================================================= 5. Legal ========================================================================= */ /* Toda la fila legal es casi imperceptible: un azul apenas más claro que el fondo del panel, y la línea divisoria aún más apagada. */ .pz-footer__legal { margin-top: clamp(26px, 3vw, 52px); padding-top: clamp(14px, 1.4vw, 22px); border-top: 1px solid #0d3f76; border-top-color: color-mix(in srgb, var(--pz-navy, #01356a) 94%, #fff); color: #2c5583; color: color-mix(in srgb, var(--pz-navy, #01356a) 82%, #fff); font-size: 13px; line-height: 1.5; text-align: center; } /* El enlace a Ozado hereda ese azul; solo se destaca al pasar por encima. */ .pz-footer .pz-footer__legal a { color: inherit; text-decoration: none; transition: color .2s var(--pz-ease, ease); } .pz-footer .pz-footer__legal a:hover, .pz-footer .pz-footer__legal a:focus-visible { color: var(--pz-teal, #00a7a9); text-decoration: underline; } /* ========================================================================= 6. Responsive ========================================================================= */ /* Portátil: la imagen del claim ya no cabe tan ancha. */ @media (max-width: 1279px) { .pz-footer__img, .pz-footer__media img { max-width: 380px; } } /* Tablet grande: marca arriba, columnas debajo en 2×2. */ @media (max-width: 1024px) { .pz-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; } .pz-footer__cols { padding-top: 0; } .pz-footer__brand { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); grid-template-areas: "logo media" "claim media"; align-items: center; column-gap: 32px; row-gap: 20px; } .pz-footer__logo { grid-area: logo; align-self: end; } .pz-claim { grid-area: claim; align-self: start; } .pz-footer__media { grid-area: media; } .pz-footer__img, .pz-footer__media img { max-width: 100%; margin-left: auto; } } /* Tablet / móvil grande: todo en columna. */ @media (max-width: 767px) { .pz-footer__brand { display: flex; flex-direction: column; gap: 24px; } .pz-footer__img, .pz-footer__media img { max-width: 100%; margin-left: 0; } .pz-footer__cols { grid-template-columns: minmax(0, 1fr); row-gap: 28px; } } @media (max-width: 480px) { .pz-claim__line1 { font-size: clamp(26px, 8.6vw, 34px); } .pz-claim__line2 { font-size: clamp(30px, 10vw, 40px); } .pz-footer__legal { text-align: left; } }