:root {
--navy: #071d36;
--navy-2: #0b2b4c;
--navy-3: #123d68;
--gold: #f2a93b;
--gold-2: #d9821f;
--gold-soft: #fff3df;
--white: #ffffff;
--gray-25: #fbfcfe;
--gray-50: #f6f8fb;
--gray-100: #edf1f6;
--gray-200: #dbe3ec;
--gray-300: #c4ceda;
--gray-500: #6b7a8c;
--gray-700: #314154;
--gray-900: #132033;
--whatsapp: #25d366;
--shadow-soft: 0 14px 38px rgba(7, 29, 54, 0.08);
--shadow-card: 0 22px 60px rgba(7, 29, 54, 0.12);
--shadow-strong: 0 30px 90px rgba(7, 29, 54, 0.18);
--radius-sm: 12px;
--radius-md: 18px;
--radius-lg: 28px;
--radius-xl: 36px;
--container: 1260px;
--header-height: 82px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }

html {
scroll-behavior: smooth;
scroll-padding-top: var(--header-height);
}

body {
font-family: Arial, Helvetica, sans-serif;
color: var(--gray-900);
background: var(--white);
line-height: 1.6;
overflow-x: hidden;
}

a {
color: inherit;
text-decoration: none;
}

button,
input,
textarea,
select {
font: inherit;
}

button {
cursor: pointer;
}

ul {
list-style-position: inside;
}

.container {
width: min(var(--container), calc(100% - 56px));
margin: 0 auto;
}

.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(219, 227, 236, 0.9);
box-shadow: 0 10px 30px rgba(7, 29, 54, 0.04);
}

.site-header::after {
content: "";
position: absolute;
left: 0;
bottom: -14px;
z-index: 1;
width: 100%;
height: 14px;
background-color: transparent;
background-image: url("assets/brand/header-cmyk-divider.svg");
background-position: center top;
background-repeat: no-repeat;
background-size: 100% 14px;
pointer-events: none;
}

.navbar {
min-height: var(--header-height);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}

.brand {
display: inline-flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}

.brand-logo {
width: 50px;
height: 50px;
display: grid;
place-items: center;
border-radius: 16px;
background: linear-gradient(135deg, rgba(242, 169, 59, 0.2), transparent 55%), linear-gradient(135deg, var(--navy), var(--navy-3));
color: var(--gold);
font-weight: 900;
letter-spacing: -0.04em;
box-shadow: 0 14px 30px rgba(7, 29, 54, 0.22);
}

.brand-logo-img {
display: block;
height: 64px;
width: auto;
max-width: 300px;
}

.brand-name {
display: flex;
flex-direction: column;
line-height: 1.1;
}

.brand-name strong {
color: var(--navy);
font-size: 1rem;
letter-spacing: -0.02em;
}

.brand-name small {
color: var(--gray-500);
font-size: 0.85rem;
font-weight: 700;
}

.nav-menu {
flex: 1;
display: flex;
align-items: center;
justify-content: space-evenly;
gap: 24px;
list-style: none;
color: var(--gray-700);
font-size: 1.08rem;
font-weight: 800;
}

.nav-menu a {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
transition: color 0.2s ease;
}

.nav-link-label {
display: inline-block;
transition: transform 0.2s ease, text-shadow 0.2s ease;
}

.nav-link:hover .nav-link-label,
.nav-link:focus-visible .nav-link-label {
transform: translateY(-2px) scale(1.04);
text-shadow: var(--nav-glow);
}

/* Bolita CMYK bajo cada enlace: aparece desde arriba y baja unos pocos px en hover/focus */
.nav-link::after {
content: "";
position: absolute;
left: 50%;
bottom: 4px;
width: 7px;
height: 7px;
border-radius: 50%;
opacity: 0;
transform: translate(-50%, -4px);
transition: opacity 0.2s ease, transform 0.25s ease;
box-shadow: 0 1px 2px rgba(7, 29, 54, 0.2);
pointer-events: none;
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
opacity: 1;
transform: translate(-50%, 0);
box-shadow: 0 1px 2px rgba(7, 29, 54, 0.2), var(--nav-dot-shadow);
}

.nav-link--catalogo {
--nav-glow: 0 0 6px rgba(0, 174, 239, 0.18), 0 0 12px rgba(0, 174, 239, 0.07);
--nav-dot-shadow: 0 0 7px rgba(0, 174, 239, 0.24);
}

.nav-link--cotizar {
--nav-glow: 0 0 6px rgba(236, 0, 140, 0.16), 0 0 12px rgba(236, 0, 140, 0.06);
--nav-dot-shadow: 0 0 7px rgba(236, 0, 140, 0.22);
}

.nav-link--trabajos {
--nav-glow: 0 0 6px rgba(255, 212, 0, 0.17), 0 0 12px rgba(255, 212, 0, 0.07);
--nav-dot-shadow: 0 0 7px rgba(255, 212, 0, 0.24);
}

.nav-link--contacto {
--nav-glow: 0 0 6px rgba(26, 26, 26, 0.14), 0 0 12px rgba(26, 26, 26, 0.05);
--nav-dot-shadow: 0 0 7px rgba(26, 26, 26, 0.2);
}

.nav-link--catalogo::after { background: #00aeef; }
.nav-link--cotizar::after { background: #ec008c; }
.nav-link--trabajos::after { background: #ffd400; }
.nav-link--contacto::after {
background: #1a1a1a;
border: 1px solid var(--gray-300);
}

.nav-menu a:hover {
color: var(--navy);
}

.nav-whatsapp {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 12px 20px;
border-radius: 999px;
background: var(--gold);
color: var(--navy);
font-weight: 900;
box-shadow: 0 14px 28px rgba(242, 169, 59, 0.28);
transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.nav-whatsapp:hover {
transform: translateY(-2px);
background: var(--gold-2);
box-shadow: 0 18px 36px rgba(217, 130, 31, 0.3);
}

.btn,
.quote-product {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 13px 22px;
border-radius: 999px;
border: 2px solid transparent;
font-weight: 900;
line-height: 1;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn:hover,
.quote-product:hover {
transform: translateY(-2px);
}

.btn-primary {
background: var(--gold);
color: var(--navy);
box-shadow: 0 16px 34px rgba(242, 169, 59, 0.28);
}

.btn-primary:hover {
background: var(--gold-2);
box-shadow: 0 22px 42px rgba(217, 130, 31, 0.28);
}

.btn-secondary {
background: var(--white);
color: var(--navy);
border-color: var(--gray-200);
box-shadow: 0 12px 30px rgba(7, 29, 54, 0.06);
}

.btn-secondary:hover {
border-color: var(--gold);
box-shadow: var(--shadow-card);
}

.btn-whatsapp {
background: var(--whatsapp);
color: #07381d;
box-shadow: 0 16px 34px rgba(37, 211, 102, 0.24);
}

.btn-whatsapp:hover {
box-shadow: 0 22px 42px rgba(37, 211, 102, 0.28);
}

.hero {
position: relative;
overflow: hidden;
background: #edf8fe;
}

.hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-image: url("assets/brand/hero-print-guides.svg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
pointer-events: none;
}

.hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"copy"
"visual"
"support";
align-items: center;
gap: 34px;
padding: 42px 0 50px;
}

.hero-title-block {
grid-area: copy;
max-width: 690px;
}

.hero-support {
grid-area: support;
display: grid;
justify-items: center;
gap: 14px;
text-align: center;
}

.section-label {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--gold-2);
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.13em;
text-transform: uppercase;
margin-bottom: 14px;
}

.section-label::before {
content: "";
width: 34px;
height: 2px;
background: var(--gold);
border-radius: 999px;
}

.hero .section-label {
color: #ef1b2d;
}

.hero .section-label::before {
background: #ef1b2d;
}

.hero h1 {
color: var(--navy);
font-size: clamp(2.55rem, 5vw, 5rem);
line-height: 0.98;
letter-spacing: -0.065em;
margin-bottom: 18px;
}

.hero-support > p {
max-width: 740px;
color: #38506d;
font-size: 1.15rem;
}
.hero-benefits {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
list-style: none;
margin: 0;
}

.hero-benefits li {
--benefit-accent: #00aeef;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px 10px 12px;
border-radius: 999px;
background: rgba(0, 174, 239, 0.1);
border: 1px solid rgba(0, 174, 239, 0.22);
color: var(--navy);
font-size: 0.92rem;
font-weight: 900;
box-shadow: 0 8px 20px rgba(7, 29, 54, 0.045);
}

.hero-benefits li::before {
content: "✓";
width: 21px;
height: 21px;
display: grid;
place-items: center;
flex: 0 0 21px;
border-radius: 50%;
background: var(--benefit-accent);
color: #ffffff;
font-size: 0.78rem;
font-weight: 900;
line-height: 1;
}

.hero-benefits li:nth-child(2) {
--benefit-accent: #ec008c;
background: rgba(236, 0, 140, 0.09);
border-color: rgba(236, 0, 140, 0.2);
}

.hero-benefits li:nth-child(3) {
--benefit-accent: #ffc400;
background: rgba(255, 196, 0, 0.12);
border-color: rgba(217, 158, 0, 0.24);
}

.hero-benefits li:nth-child(3)::before {
color: var(--navy);
}


.hero-buttons {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px 16px;
}

.hero-buttons .btn {
min-height: 56px;
gap: 10px;
padding: 15px 28px;
font-size: 1.05rem;
}

.hero-button-icon {
width: 24px;
height: 24px;
flex: 0 0 24px;
}

.hero .btn-primary {
background: #ffc20a;
color: var(--navy);
box-shadow: 0 14px 30px rgba(255, 194, 10, 0.24);
}

.hero .btn-primary:hover {
background: #f4b900;
box-shadow: 0 18px 34px rgba(255, 194, 10, 0.28);
}

.hero .btn-whatsapp {
background: #09c766;
color: #ffffff;
box-shadow: 0 14px 30px rgba(9, 199, 102, 0.24);
}

.hero .btn-whatsapp:hover {
background: #08b95e;
box-shadow: 0 18px 34px rgba(9, 199, 102, 0.28);
}

.hero-visual {
grid-area: visual;
position: relative;
min-height: 320px;
display: grid;
place-items: center;
padding: 24px;
}

.hero-logo {
display: block;
width: 100%;
max-width: 560px;
height: auto;
}

.hero-visual::before,
.hero-visual::after {
display: none;
}

.hero-visual::before {
width: 320px;
height: 320px;
right: -105px;
top: -80px;
background: rgba(242, 169, 59, 0.16);
}

.hero-visual::after {
width: 220px;
height: 220px;
left: -70px;
bottom: -70px;
background: rgba(255, 255, 255, 0.08);
}

.visual-card {
position: absolute;
inset: auto 32px 32px 32px;
min-height: 230px;
padding: 34px;
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18);
}

.visual-card::before {
content: "";
position: absolute;
top: -170px;
left: 26px;
width: 72%;
height: 210px;
border-radius: 28px;
background: linear-gradient(135deg, rgba(242, 169, 59, 0.92), rgba(242, 169, 59, 0) 45%), linear-gradient(135deg, #ffffff, #eef3f8);
box-shadow: 0 26px 50px rgba(0, 0, 0, 0.22);
transform: rotate(-5deg);
}

.visual-card::after {
content: "";
position: absolute;
top: -95px;
right: 18px;
width: 58%;
height: 175px;
border-radius: 24px;
background: linear-gradient(135deg, rgba(18, 61, 104, 0.18), transparent), #ffffff;
box-shadow: 0 24px 45px rgba(0, 0, 0, 0.16);
transform: rotate(7deg);
}

.visual-card h2 {
position: relative;
z-index: 2;
color: var(--navy);
font-size: 2rem;
line-height: 1.05;
letter-spacing: -0.04em;
margin-bottom: 12px;
}

.visual-card p {
position: relative;
z-index: 2;
color: var(--gray-500);
font-weight: 800;
}

/* Logo grande centrado dentro de la tarjeta del hero (reemplaza la decoración geométrica) */
.visual-card {
display: grid;
place-items: center;
}

.visual-card::before,
.visual-card::after {
display: none;
}

.visual-logo {
position: relative;
z-index: 2;
display: block;
width: 100%;
max-width: 320px;
height: auto;
}
.section {
padding: 78px 0;
}


.section {
border-top: 1px solid rgba(219, 227, 236, 0.28);
box-shadow: none;
}

.benefits,
.faq {
background: var(--white);
}

.catalog,
.quote,
.formats {
background: linear-gradient(180deg, #fbfcfe 0%, #f5f8fb 100%);
}

.quick-contact {
border-top: 1px solid rgba(18, 61, 104, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.gallery {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #09213d 0%, #123d68 52%, #071d36 100%);
color: var(--white);
border-top: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(7, 29, 54, 0.18);
}

.gallery::before {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
background-size: 56px 56px;
-webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
pointer-events: none;
}

.gallery .container {
position: relative;
z-index: 1;
}

.gallery .section-label,
.gallery .section-heading h2 {
color: var(--white);
}

.gallery .section-label::before {
background: var(--gold);
}

.gallery .section-heading p:not(.section-label) {
color: rgba(255, 255, 255, 0.76);
}

.faq {
border-top-color: rgba(7, 29, 54, 0.08);
}
.section-heading {
max-width: 760px;
margin-bottom: 34px;
}

.section-heading h2 {
color: var(--navy);
font-size: clamp(2rem, 3.2vw, 3.3rem);
line-height: 1.08;
letter-spacing: -0.045em;
margin-bottom: 14px;
}

.section-heading p:not(.section-label) {
color: var(--gray-500);
font-size: 1.05rem;
}

.benefits-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}

.benefit-card {
position: relative;
overflow: hidden;
padding: 30px;
min-height: 220px;
border-radius: var(--radius-lg);
background: var(--white);
border: 1px solid var(--gray-100);
box-shadow: var(--shadow-soft);
transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.benefit-card::before {
content: "";
position: absolute;
top: 0;
left: 30px;
right: 30px;
height: 4px;
background: var(--gold);
border-radius: 0 0 999px 999px;
}

.benefit-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card);
}

.benefit-card h3 {
color: var(--navy);
font-size: 1.18rem;
margin-bottom: 12px;
letter-spacing: -0.02em;
}

.benefit-card p {
color: var(--gray-500);
font-size: 0.98rem;
}

.catalog-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 30px;
}

.catalog-filter {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 9px 18px;
border-radius: 999px;
border: 1px solid var(--gray-200);
background: var(--white);
color: var(--navy);
font-weight: 800;
font-size: 0.9rem;
line-height: 1;
white-space: nowrap;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.catalog-filter:hover {
border-color: var(--gold);
}

.catalog-filter.is-active {
background: var(--navy);
border-color: var(--navy);
color: var(--white);
box-shadow: 0 12px 26px rgba(7, 29, 54, 0.18);
}

.catalog-groups {
display: grid;
gap: 36px;
}

.catalog-group {
display: grid;
gap: 20px;
}

.catalog-group-heading {
max-width: 760px;
}

.catalog-group-heading h3 {
color: var(--navy);
font-size: clamp(1.35rem, 2vw, 1.9rem);
line-height: 1.14;
letter-spacing: -0.035em;
margin-bottom: 8px;
}

.catalog-group-heading p {
color: var(--gray-500);
font-size: 1rem;
}

.more-products {
margin-top: 48px;
padding-top: 40px;
border-top: 1px solid var(--gray-200);
}

.more-products-heading {
max-width: 760px;
margin-bottom: 24px;
}

.more-products-heading h3 {
color: var(--navy);
font-size: clamp(1.35rem, 2vw, 1.9rem);
line-height: 1.14;
letter-spacing: -0.035em;
margin-bottom: 8px;
}

.more-products-heading p {
color: var(--gray-500);
font-size: 1rem;
}

.more-products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}

.more-cat {
padding: 24px;
border-radius: var(--radius-lg);
background: var(--white);
border: 1px solid var(--gray-100);
box-shadow: var(--shadow-soft);
}

.more-cat h4 {
display: flex;
align-items: center;
gap: 10px;
color: var(--navy);
font-size: 1.05rem;
letter-spacing: -0.01em;
margin-bottom: 16px;
}

.more-cat h4::before {
content: "";
width: 22px;
height: 3px;
border-radius: 999px;
background: var(--gold);
flex-shrink: 0;
}

.chip-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
}

.chip-list li {
display: flex;
}

.catalog-chip {
padding: 7px 12px;
border-radius: 999px;
background: var(--gray-50);
border: 1px solid var(--gray-200);
color: var(--gray-700);
font-size: 0.85rem;
font-weight: 700;
line-height: 1.1;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.catalog-chip:hover {
background: var(--navy);
border-color: var(--navy);
color: var(--white);
}

.catalog-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}

.product-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 250px;
padding: 30px;
border-radius: var(--radius-lg);
background: linear-gradient(180deg, #ffffff, #fbfcfe);
border: 1px solid var(--gray-100);
box-shadow: var(--shadow-soft);
overflow: hidden;
transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.product-card::before {
content: "";
width: 58px;
height: 58px;
border-radius: 18px;
background: linear-gradient(135deg, rgba(242, 169, 59, 0.22), rgba(242, 169, 59, 0.08));
margin-bottom: 22px;
}

.product-card::after {
content: "";
position: absolute;
width: 180px;
height: 180px;
right: -95px;
top: -95px;
border-radius: 50%;
background: rgba(18, 61, 104, 0.055);
}

.product-card:hover {
transform: translateY(-5px);
border-color: rgba(242, 169, 59, 0.45);
box-shadow: var(--shadow-card);
}

.product-card h3 {
position: relative;
z-index: 1;
color: var(--navy);
font-size: 1.2rem;
line-height: 1.2;
margin-bottom: 10px;
letter-spacing: -0.025em;
}

.product-card p {
position: relative;
z-index: 1;
color: var(--gray-500);
font-size: 0.97rem;
margin-bottom: 22px;
}

/* Tarjetas con imagen: la foto va arriba; se desactiva el ícono y el círculo decorativo */
.product-card.has-image::before,
.product-card.has-image::after {
display: none;
}

.product-card.has-image .product-media {
position: relative;
z-index: 1;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center;
display: block;
border-radius: var(--radius-md);
background: var(--gray-100);
margin-bottom: 22px;
}

/* Encuadre por producto en tarjetas destacadas */
.product-card.has-image.product-lonas .product-media {
object-position: center 18%;
}

/* Flyers: marco con recorte para acercar el producto y subir el encuadre */
.product-card.product-flyers .product-media-frame {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--radius-md);
background: var(--gray-100);
margin-bottom: 22px;
}

.product-card.product-flyers .product-media-frame .product-media {
width: 100%;
height: 100%;
margin: 0;
border-radius: 0;
transform: scale(1.35);
transform-origin: center 70%;
}

.quote-product {
position: relative;
z-index: 1;
margin-top: auto;
width: fit-content;
background: var(--navy);
color: var(--white);
border-color: var(--navy);
box-shadow: 0 14px 30px rgba(7, 29, 54, 0.16);
}

.quote-product:hover {
background: var(--gold);
color: var(--navy);
border-color: var(--gold);
box-shadow: 0 18px 36px rgba(242, 169, 59, 0.25);
}

.gallery-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 205px;
gap: 18px;
}

.gallery-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 220px;
padding: 24px;
border-radius: var(--radius-lg);
color: var(--white);
overflow: hidden;
box-shadow: 0 18px 42px rgba(2, 12, 24, 0.24);
border: 1px solid rgba(255, 255, 255, 0.13);
isolation: isolate;
transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.gallery-card:hover {
transform: translateY(-4px);
box-shadow: 0 26px 64px rgba(2, 12, 24, 0.3);
border-color: rgba(242, 169, 59, 0.32);
}

.gallery-card::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background: linear-gradient(135deg, #123d68 0%, #0b2b4c 48%, #071d36 100%);
}

.gallery-card::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, transparent 0%, rgba(7, 29, 54, 0.42) 58%, rgba(7, 29, 54, 0.86) 100%);
}

.gallery-card span {
display: inline-flex;
width: fit-content;
margin-bottom: 10px;
padding: 7px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.16);
color: var(--gold);
font-size: 0.78rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.1em;
backdrop-filter: blur(10px);
}

.gallery-card h3 {
max-width: 260px;
font-size: 1.35rem;
line-height: 1.12;
letter-spacing: -0.035em;
}

.gallery-card-1,
.gallery-card-2,
.gallery-card-3,
.gallery-card-4,
.gallery-card-5,
.gallery-card-6 {
grid-column: span 2;
}

.gallery-card-1::before {
background: linear-gradient(135deg, #17466f 0%, #123d68 45%, #071d36 100%);
}

.gallery-card-2::before {
background: linear-gradient(135deg, #0d3156 0%, #123d68 44%, #09213d 100%);
}

.gallery-card-3::before {
background: linear-gradient(135deg, #09213d 0%, #123d68 48%, #154b7c 100%);
}

.gallery-card-4::before {
background: linear-gradient(135deg, #173f64 0%, #0d3156 48%, #071d36 100%);
}

.gallery-card-5::before {
background: linear-gradient(135deg, #071d36 0%, #0b2b4c 44%, #0d385f 100%);
}

.gallery-card-6::before {
background: linear-gradient(135deg, #10385f 0%, #0b2b4c 48%, #06182d 100%);
}


.quick-contact {
padding: 66px 0;
background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}

.quick-contact-card {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 34px;
align-items: center;
padding: 34px;
border-radius: var(--radius-xl);
background: var(--white);
border: 1px solid var(--gray-100);
box-shadow: var(--shadow-card);
}

.quick-contact-content h2 {
color: var(--navy);
font-size: clamp(1.9rem, 3vw, 2.8rem);
line-height: 1.08;
letter-spacing: -0.045em;
margin-bottom: 14px;
}

.quick-contact-content p:not(.section-label) {
color: var(--gray-500);
font-size: 1.05rem;
margin-bottom: 24px;
}

.quick-contact-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}

.quick-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}

.quick-step {
padding: 22px;
border-radius: var(--radius-md);
background: var(--gray-50);
border: 1px solid var(--gray-100);
}

.quick-step span {
display: grid;
place-items: center;
width: 36px;
height: 36px;
margin-bottom: 14px;
border-radius: 50%;
background: var(--gold);
color: var(--navy);
font-weight: 900;
}

.quick-step h3 {
color: var(--navy);
font-size: 1.05rem;
line-height: 1.2;
margin-bottom: 8px;
}

.quick-step p {
color: var(--gray-500);
font-size: 0.94rem;
}

.form {
padding: 34px;
border-radius: var(--radius-xl);
background: var(--white);
border: 1px solid var(--gray-100);
box-shadow: var(--shadow-card);
}
.form-intro {
margin-bottom: 22px;
padding: 16px 18px;
border-radius: var(--radius-sm);
background: var(--gold-soft);
color: var(--navy);
border-left: 4px solid var(--gold);
font-weight: 800;
}

.form-section {
padding-top: 22px;
margin-top: 24px;
border-top: 1px solid var(--gray-100);
}

.form-intro + .form-section {
padding-top: 0;
margin-top: 0;
border-top: 0;
}

.form-section-heading {
max-width: 720px;
margin-bottom: 20px;
}

.form-section-heading h3 {
color: var(--navy);
font-size: 1.28rem;
line-height: 1.2;
letter-spacing: -0.025em;
margin-bottom: 6px;
}

.form-section-heading p {
color: var(--gray-500);
font-size: 0.96rem;
}

.form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}

.form-group {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}

.form-group.full {
grid-column: 1 / -1;
}

label {
color: var(--navy);
font-size: 0.92rem;
font-weight: 900;
}

input,
select,
textarea {
width: 100%;
border: 1px solid var(--gray-200);
border-radius: var(--radius-sm);
background: var(--gray-25);
color: var(--gray-900);
padding: 14px 15px;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

input::placeholder,
textarea::placeholder {
color: #96a3b2;
}

input:focus,
select:focus,
textarea:focus {
background: var(--white);
border-color: rgba(242, 169, 59, 0.85);
box-shadow: 0 0 0 4px rgba(242, 169, 59, 0.14);
}

textarea {
resize: vertical;
min-height: 115px;
}

input[type="file"] {
padding: 12px;
background: var(--white);
}

.hidden-field {
display: none;
}

.is-hidden {
display: none !important;
}


.quote-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}

.form-note {
margin-top: 18px;
padding: 14px 16px;
border-radius: var(--radius-sm);
background: #eaf1f8;
color: var(--gray-700);
border-left: 4px solid var(--navy-3);
font-size: 0.92rem;
}


.formats-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}

.format-card {
padding: 32px;
border-radius: var(--radius-lg);
background: var(--white);
border: 1px solid var(--gray-100);
box-shadow: var(--shadow-soft);
}

.format-card h3 {
color: var(--navy);
font-size: 1.25rem;
margin-bottom: 16px;
}

.format-card ul {
display: grid;
gap: 10px;
list-style: none;
}

.format-card li {
position: relative;
padding-left: 24px;
color: var(--gray-700);
}

.format-card li::before {
content: "";
position: absolute;
left: 0;
top: 0.7em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--gold);
}

.format-card-lead {
max-width: 880px;
margin-inline: auto;
padding: 40px;
}

.format-card-lead > p {
color: var(--gray-500);
font-size: 1rem;
margin-bottom: 26px;
max-width: 640px;
}

.format-card .format-list {
grid-template-columns: repeat(2, 1fr);
gap: 14px 40px;
}

.format-card .format-list li {
padding-top: 14px;
border-top: 1px solid var(--gray-100);
color: var(--navy);
font-weight: 700;
font-size: 1.02rem;
}

.format-card .format-list li::before {
top: 1.35em;
}


.faq {
background: var(--white);
}

.faq-grid {
display: grid;
gap: 10px;
}

.faq details {
border: 1px solid var(--gray-100);
border-radius: var(--radius-md);
background: var(--white);
box-shadow: 0 10px 28px rgba(7, 29, 54, 0.055);
overflow: hidden;
}

.faq summary {
position: relative;
list-style: none;
cursor: pointer;
padding: 18px 56px 18px 22px;
color: var(--navy);
font-weight: 900;
}

.faq summary::-webkit-details-marker {
display: none;
}

.faq summary::after {
content: "+";
position: absolute;
right: 22px;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--gold-soft);
color: var(--gold-2);
font-size: 1.2rem;
font-weight: 900;
}

.faq details[open] summary::after {
content: "-";
}

.faq details p {
padding: 0 22px 18px;
color: var(--gray-500);
}

.final-cta {
padding: 78px 0;
background: linear-gradient(135deg, var(--navy), #071d36 46%, #031120 100%);
}

.final-cta-card {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 30px;
color: var(--white);
}

.final-cta-card h2 {
font-size: clamp(2rem, 3.5vw, 3.4rem);
line-height: 1.05;
letter-spacing: -0.05em;
margin-bottom: 10px;
}

.final-cta-card p {
color: rgba(255, 255, 255, 0.76);
font-size: 1.08rem;
}

.cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
}

.final-cta .btn-secondary {
background: rgba(255, 255, 255, 0.08);
color: var(--white);
border-color: rgba(255, 255, 255, 0.28);
box-shadow: none;
}

.final-cta .btn-secondary:hover {
background: rgba(255, 255, 255, 0.14);
border-color: var(--gold);
}

/* Section atmosphere refinements */
.benefits,
.catalog,
.quick-contact,
.quote,
.formats,
.faq {
position: relative;
overflow: hidden;
isolation: isolate;
}

.benefits > .container,
.catalog > .container,
.quick-contact > .container,
.quote > .container,
.formats > .container,
.faq > .container {
position: relative;
z-index: 1;
}

.benefits {
background: #f1dfc5;
border-top-color: rgba(148, 123, 86, 0.12);
}

.catalog {
background: linear-gradient(180deg, #cbdce9 0%, #dce9f3 52%, #edf4f9 100%);
border-top-color: rgba(7, 29, 54, 0.08);
box-shadow: none;
}

.quick-contact {
background: linear-gradient(180deg, #cfe3f2 0%, #dcecf7 58%, #eef7fb 100%);
border-top-color: rgba(7, 29, 54, 0.08);
}

.quote {
background: linear-gradient(180deg, #d4e1ec 0%, #e4edf5 50%, #cfdde8 100%);
border-top-color: rgba(7, 29, 54, 0.08);
box-shadow: none;
}

.formats {
background: linear-gradient(180deg, #e8f0f6 0%, #f8fbfd 100%);
border-top-color: rgba(7, 29, 54, 0.07);
}

.faq {
background: linear-gradient(180deg, #fbf4e7 0%, #fffaf2 50%, #f8f5ef 100%);
border-top-color: rgba(148, 123, 86, 0.1);
box-shadow: none;
}

.benefits::before,
.catalog::before,
.quote::before,
.formats::before,
.faq::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: linear-gradient(rgba(7, 29, 54, 0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(7, 29, 54, 0.018) 1px, transparent 1px);
background-size: 76px 76px;
-webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
opacity: 0.62;
}

/* Sección "Por qué elegirnos": composición editorial inspirada en artes gráficas */
.benefits::before {
background-image: url("assets/brand/benefits-print-guides.svg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-mask-image: none;
mask-image: none;
clip-path: polygon(0 0, 100% 0, 100% 68%, 87% 68%, 87% 100%, 0 100%);
opacity: 1;
}

.benefits > .container {
width: min(1120px, calc(100% - 56px));
}

.benefits .section-heading {
max-width: 760px;
margin-bottom: 28px;
}

.benefits .section-label {
color: #db7b12;
letter-spacing: 0.22em;
}

.benefits .section-label::before {
background: #ef8b17;
}

.benefits .section-heading h2 {
max-width: 850px;
font-family: inherit;
font-size: clamp(2.7rem, 4vw, 3.7rem);
font-weight: 700;
line-height: 0.98;
letter-spacing: -0.045em;
margin-bottom: 20px;
text-wrap: balance;
}

.benefits-title span,
.benefits-intro span {
white-space: nowrap;
}

.benefits-intro {
max-width: 760px;
padding-left: 18px;
border-left: 3px solid #ef8b17;
color: #39516a !important;
font-size: 1.02rem !important;
line-height: 1.55;
}

.benefits-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}

.benefits .benefit-card {
--benefit-accent: #ef8b17;
display: flex;
flex-direction: column;
min-height: 320px;
padding: 20px 22px 24px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(148, 123, 86, 0.16);
border-bottom: 3px solid var(--benefit-accent);
box-shadow: 0 7px 16px rgba(8, 38, 72, 0.07);
}

.benefits .benefit-card:hover {
box-shadow: 0 7px 16px rgba(8, 38, 72, 0.07);
}

.benefits .benefit-card::before {
display: none;
}

.benefits .benefit-card--service {
--benefit-accent: #00aeef;
}

.benefits .benefit-card--speed {
--benefit-accent: #ec008c;
}

.benefits .benefit-card--delivery {
--benefit-accent: #e7b400;
}

.benefit-card-icon {
width: 78px;
height: 78px;
display: grid;
place-items: center;
margin-bottom: 18px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.74);
border: 1px solid rgba(7, 29, 54, 0.1);
color: var(--navy);
box-shadow: none;
}

.benefit-card-icon svg {
width: 56px;
height: 56px;
}

.benefits .benefit-card h3 {
position: relative;
max-width: 190px;
min-height: 58px;
margin-bottom: 18px;
padding-bottom: 13px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.32rem;
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.025em;
}

.benefits .benefit-card h3::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 38px;
height: 3px;
border-radius: 999px;
background: var(--benefit-accent);
}

.benefits .benefit-card p {
position: relative;
z-index: 1;
max-width: 210px;
color: #526277;
font-size: 0.88rem;
line-height: 1.55;
}

.benefit-card-number {
position: absolute;
right: 14px;
bottom: 8px;
color: rgba(77, 66, 52, 0.09);
font-size: 2rem;
font-weight: 900;
line-height: 1;
letter-spacing: -0.06em;
}

.quick-contact::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: linear-gradient(120deg, rgba(7, 29, 54, 0.038), transparent 34%, transparent 66%, rgba(7, 29, 54, 0.028));
opacity: 0.7;
}

.catalog .product-card {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), #fdfefe);
box-shadow: 0 18px 42px rgba(7, 29, 54, 0.1);
}

.quote .form {
box-shadow: 0 22px 58px rgba(7, 29, 54, 0.13), 0 0 0 1px rgba(255, 255, 255, 0.82);
}

.final-cta {
background: linear-gradient(135deg, var(--navy), #071d36 46%, #031120 100%);
}

.reveal-section > .container,
.final-cta.reveal-section > .container {
opacity: 0;
transform: translateY(22px);
transition: opacity 640ms ease, transform 640ms cubic-bezier(0.2, 0.8, 0.2, 1);
will-change: opacity, transform;
}

.reveal-section.is-visible > .container,
.final-cta.reveal-section.is-visible > .container {
opacity: 1;
transform: translateY(0);
}

.reveal-section.is-leaving > .container,
.final-cta.reveal-section.is-leaving > .container {
opacity: 0;
transform: translateY(-22px);
}

.reveal-section.reveal-static > .container {
opacity: 1;
transform: translateY(0);
}
.site-footer {
background: #041529;
color: rgba(255, 255, 255, 0.74);
padding-top: 56px;
}

.footer-grid {
display: grid;
grid-template-columns: 1.15fr 0.9fr 0.9fr;
gap: 46px;
padding-bottom: 40px;
}

.site-footer h2,
.site-footer h3 {
color: var(--white);
letter-spacing: -0.025em;
}

.site-footer h2 {
font-size: 1.65rem;
margin-bottom: 12px;
}

.site-footer h3 {
font-size: 1.08rem;
margin-bottom: 14px;
}

.site-footer p,
.site-footer li {
margin-bottom: 8px;
}

.site-footer ul {
list-style: none;
}

.site-footer a {
color: rgba(255, 255, 255, 0.76);
transition: color 0.2s ease;
}

.site-footer a:hover {
color: var(--gold);
}

.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 18px 20px;
text-align: center;
color: rgba(255, 255, 255, 0.62);
font-size: 0.92rem;
}

.floating-whatsapp {
position: fixed;
right: 22px;
bottom: 22px;
z-index: 110;
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
padding: 0;
border-radius: 50%;
background: var(--whatsapp);
color: var(--white);
box-shadow: 0 20px 44px rgba(37, 211, 102, 0.48);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.floating-whatsapp svg {
display: block;
}

.floating-whatsapp:hover {
transform: translateY(-3px);
box-shadow: 0 24px 48px rgba(37, 211, 102, 0.5);
}

@media (min-width: 1101px) {
html {
scroll-behavior: smooth;
}

/* Header amplio: navegación centrada respecto al ancho completo */
.navbar {
width: min(1480px, calc(100% - 56px));
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.brand {
grid-column: 1;
justify-self: start;
}

.nav-menu {
grid-column: 2;
width: min(760px, 100%);
display: grid;
grid-template-columns: repeat(4, max-content);
justify-content: center;
column-gap: clamp(38px, 4vw, 74px);
margin: 0;
}

#inicio,
main > .section,
.final-cta {
scroll-margin-top: 0;
}

.benefits,
.quick-contact,
.gallery,
.faq {
min-height: min(860px, calc(100vh - var(--header-height)));
display: flex;
align-items: flex-start;
}

.quick-contact,
.benefits {
align-items: center;
}

/* Hero: título y logo arriba; soporte común centrado debajo */
.hero {
min-height: calc(100svh - var(--header-height) - 1px);
}

.hero-grid {
min-height: calc(100svh - var(--header-height) - 1px);
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
grid-template-rows: auto auto;
grid-template-areas:
"copy visual"
"support support";
align-content: center;
column-gap: 48px;
row-gap: 28px;
padding: 24px 0 28px;
}

.hero-support {
gap: 12px;
}

.hero-title-block {
max-width: 860px;
}

.hero h1 {
font-size: clamp(2.7rem, 3.9vw, 4.6rem);
}

.hero-visual {
min-height: 300px;
padding: 8px;
}

.hero-logo {
max-width: 560px;
}

.catalog,
.quote {
padding-top: 78px;
padding-bottom: 88px;
}

.product-card {
min-height: 265px;
padding: 32px;
}

.product-card::before {
margin-bottom: 24px;
}

.product-card p {
margin-bottom: 30px;
}

.gallery {
padding-top: 88px;
padding-bottom: 94px;
}

.gallery .section-heading {
margin-bottom: 42px;
}

.gallery-grid {
grid-auto-rows: 220px;
gap: 22px;
}

.gallery-card {
min-height: 235px;
padding: 28px;
}

.gallery-card span {
margin-bottom: 12px;
}

.gallery-card h3 {
max-width: 300px;
}
}
@media (max-width: 1100px) {
/* Red de seguridad: en móvil/tablet las secciones nunca quedan ocultas por la animación reveal */
.reveal-section > .container,
.final-cta.reveal-section > .container,
.reveal-section.is-leaving > .container,
.final-cta.reveal-section.is-leaving > .container {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
}

.navbar {
gap: 18px;
}

.nav-menu {
gap: 10px;
font-size: 0.86rem;
}

.catalog-grid,
.benefits-grid {
grid-template-columns: repeat(2, 1fr);
}

.gallery-grid {
grid-template-columns: repeat(2, 1fr);
}

.gallery-card,
.gallery-card-1,
.gallery-card-2,
.gallery-card-3,
.gallery-card-4,
.gallery-card-5,
.gallery-card-6 {
grid-column: span 1;
}
}

@media (min-width: 1101px) and (max-width: 1279px) {
.catalog-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

@media (max-width: 920px) {
:root {
--header-height: 74px;
}

.navbar {
min-height: var(--header-height);
flex-wrap: wrap;
padding: 12px 0;
}

.brand-logo-img {
height: 48px;
max-width: min(240px, 70vw);
}

.brand-logo {
width: 46px;
height: 46px;
}

.nav-whatsapp {
min-height: 40px;
padding: 10px 16px;
}

.nav-menu {
order: 3;
width: 100%;
justify-content: flex-start;
overflow-x: auto;
gap: 8px;
padding: 1px 0;
scrollbar-width: none;
}

.nav-menu::-webkit-scrollbar {
display: none;
}

.nav-menu a {
min-height: 44px;
white-space: nowrap;
padding: 0 12px;
border-radius: 999px;
background: var(--gray-50);
border: 1px solid var(--gray-100);
}

.hero-grid {
grid-template-columns: 1fr;
min-height: auto;
padding: 48px 0 58px;
gap: 42px;
}

.hero-title-block {
max-width: 760px;
}

.hero-visual {
min-height: 430px;
}

.formats-grid,
.footer-grid,
.final-cta-card {
grid-template-columns: 1fr;
}

.final-cta-card {
text-align: left;
}

.cta-buttons {
justify-content: flex-start;
}
}

@media (max-width: 768px) {
/* Header más compacto en móvil */
.navbar {
gap: 14px;
padding: 8px 0;
}

.brand-logo {
width: 42px;
height: 42px;
}

.brand-logo-img {
height: 48px;
}

/* Menú horizontal desplazable, sin barra visible y con scroll suave */
.nav-menu {
gap: 8px;
padding: 3px 0;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
}

.nav-menu a {
min-height: 44px;
padding: 0 13px;
font-size: 0.82rem;
}

/* Compactar el ritmo vertical de las secciones */
.section,
.final-cta {
padding: 46px 0;
}

.section-heading {
margin-bottom: 22px;
}

/* Filtros: fila horizontal desplazable en móvil */
.catalog-filters {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}

.catalog-filters::-webkit-scrollbar {
display: none;
}

.catalog-filter {
flex-shrink: 0;
}

/* Tarjetas más ligeras: sin alturas heredadas, radios y sombras más suaves */
.benefit-card,
.product-card,
.format-card {
min-height: auto;
border-radius: var(--radius-md);
box-shadow: var(--shadow-soft);
}

/* Catálogo móvil: ajuste del marcador de las tarjetas */
.product-card::before {
width: 48px;
height: 48px;
margin-bottom: 18px;
}

.gallery-card {
min-height: 166px;
border-radius: var(--radius-md);
}

.form {
padding: 22px;
}

/* Formulario móvil: campos cómodos, sin auto-zoom en iOS y con mejor ritmo */
input,
select,
textarea {
font-size: 16px;
}

.form-section {
padding-top: 20px;
margin-top: 20px;
}

.form-section-heading {
margin-bottom: 16px;
}

.form-grid {
gap: 16px;
}

/* Botón flotante: más pequeño y respetando el safe-area inferior */
.floating-whatsapp {
width: 58px;
height: 58px;
right: max(14px, env(safe-area-inset-right));
bottom: max(14px, env(safe-area-inset-bottom));
padding: 0;
}

.floating-whatsapp svg {
width: 28px;
height: 28px;
}

/* Que el botón flotante no tape los botones del formulario */
.quote-actions {
padding-bottom: 4px;
}

/* Hero móvil: altura más contenida y mejor ritmo entre título, texto y botones */
.hero-grid {
gap: 30px;
padding: 36px 0 44px;
}

.hero h1 {
line-height: 1.05;
text-wrap: balance;
overflow-wrap: break-word;
margin-bottom: 14px;
}

.hero-support > p {
line-height: 1.55;
}

.hero-visual {
min-height: 240px;
}

/* Footer móvil: bloques con mejor separación, enlaces táctiles y cierre despejado del botón flotante */
.footer-grid {
gap: 30px;
padding-bottom: 32px;
}

.site-footer ul a {
display: inline-block;
padding: 4px 0;
}

.footer-bottom {
padding-bottom: calc(80px + env(safe-area-inset-bottom));
}
}

@media (max-width: 720px) {
.container {
width: min(100% - 28px, var(--container));
}

.hero h1 {
font-size: 2.55rem;
}

.hero-support > p {
font-size: 1.03rem;
}
.hero-benefits {
display: grid;
grid-template-columns: 1fr;
margin: 0 0 22px;
}

.hero-buttons,
.quote-actions,
.cta-buttons {
display: grid;
grid-template-columns: 1fr;
}

.hero-buttons {
width: 100%;
}

.btn,
.quote-product {
width: 100%;
}

.hero-visual {
border-radius: 26px;
}

.visual-card {
left: 18px;
right: 18px;
bottom: 18px;
padding: 24px;
}

.visual-card::before {
top: -125px;
height: 165px;
}

.visual-card::after {
top: -70px;
height: 130px;
}

.visual-card h2 {
font-size: 1.55rem;
}

.catalog-grid,
.benefits-grid,
.gallery-grid,
.form-grid {
grid-template-columns: 1fr;
}

.quick-contact-actions {
display: grid;
grid-template-columns: 1fr;
}

.format-card {
padding: 24px;
}

.format-card .format-list {
grid-template-columns: 1fr;
}

.gallery-grid {
grid-auto-rows: auto;
}
}

/* Catálogo: composición técnica clara inspirada en procesos de impresión */
.catalog {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 252, 0.98)),
#f6f9fc;
border-top-color: rgba(7, 29, 54, 0.07);
}

.catalog::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cg fill='none' stroke='%23123d68' stroke-width='1.2' opacity='.18'%3E%3Cpath d='M36 120h74m-37-37v74M23 102h14m72 0h14M73 70v14m0 72v14'/%3E%3Ccircle cx='73' cy='120' r='18'/%3E%3Cpath stroke-dasharray='9 10' d='M0 310l128-38v210H30M1470 172h84v250h-112V214zM1418 214h24m112 0h46M1470 146v26m0 250v29'/%3E%3Cpath d='M1220 90l96 42v142l-96-42-96 42V132zM1220 90v142m-96-100 96 42 96-42M1194 560h242v176h-242zm22-28h198v28m-99-54v26'/%3E%3Cpath d='M45 690h124v124H45zm22-22h124v124M1510 642h54m-27-27v54'/%3E%3Ccircle cx='1537' cy='642' r='13'/%3E%3C/g%3E%3Cg opacity='.25'%3E%3Ccircle fill='%2300a9de' cx='80' cy='560' r='3'/%3E%3Ccircle fill='%23ed1e79' cx='94' cy='560' r='3'/%3E%3Ccircle fill='%23f2b705' cx='108' cy='560' r='3'/%3E%3Ccircle fill='%23262b31' cx='122' cy='560' r='3'/%3E%3Crect fill='%2300a9de' x='1471' y='254' width='13' height='13'/%3E%3Crect fill='%23ed1e79' x='1488' y='254' width='13' height='13'/%3E%3Crect fill='%23f2b705' x='1505' y='254' width='13' height='13'/%3E%3Crect fill='%23262b31' x='1522' y='254' width='13' height='13'/%3E%3C/g%3E%3C/svg%3E");
background-position: center top;
background-repeat: repeat-y;
background-size: max(1320px, 100vw) auto;
-webkit-mask-image: none;
mask-image: none;
opacity: 0.58;
}

.catalog .section-heading {
max-width: 720px;
margin-bottom: 32px;
}

.catalog .section-label {
color: #b96500;
letter-spacing: 0.18em;
}

.catalog .section-label::before {
background: #e48900;
}

.catalog .section-heading h2 {
font-size: clamp(2.55rem, 4vw, 3.65rem);
line-height: 1.02;
letter-spacing: -0.05em;
margin-bottom: 16px;
}

.catalog .section-heading p:not(.section-label) {
max-width: 650px;
color: #53657a;
line-height: 1.75;
}

.catalog-filters {
gap: 14px;
margin-bottom: 38px;
}

.catalog-filter {
--filter-accent: #071d36;
--filter-soft: rgba(7, 29, 54, 0.08);
--filter-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/g%3E%3C/svg%3E");
gap: 10px;
min-height: 48px;
padding: 10px 21px;
border: 1.5px solid color-mix(in srgb, var(--filter-accent) 72%, white);
background: rgba(255, 255, 255, 0.82);
color: var(--filter-accent);
font-size: 0.94rem;
box-shadow: 0 8px 20px rgba(7, 29, 54, 0.055);
backdrop-filter: blur(4px);
}

.catalog-filter::before {
content: "";
flex: 0 0 20px;
width: 20px;
height: 20px;
background: currentColor;
-webkit-mask: var(--filter-icon) center / contain no-repeat;
mask: var(--filter-icon) center / contain no-repeat;
}

.catalog-filter[data-filter="papeleria"] {
--filter-accent: #007fae;
--filter-soft: rgba(0, 127, 174, 0.1);
--filter-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l4.2-1 10.9-10.9a2.1 2.1 0 0 0-3-3L5.2 16zM14.7 6.5l3 3M4 20h16'/%3E%3C/g%3E%3C/svg%3E");
}

.catalog-filter[data-filter="gran-formato"] {
--filter-accent: #c11667;
--filter-soft: rgba(193, 22, 103, 0.1);
--filter-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10a3 3 0 0 1 3 3v9H8a4 4 0 0 1-4-4V7a3 3 0 0 1 3-3z'/%3E%3Ccircle cx='8' cy='16' r='4'/%3E%3Cpath d='M8 12V7h9v9'/%3E%3C/g%3E%3C/svg%3E");
}

.catalog-filter[data-filter="exhibicion"] {
--filter-accent: #b77900;
--filter-soft: rgba(183, 121, 0, 0.11);
--filter-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10l1 14H6zM9 17l-2 4m8-4 2 4M5 21h14M9 7h6'/%3E%3C/g%3E%3C/svg%3E");
}

.catalog-filter[data-filter="promocionales"] {
--filter-accent: #292d33;
--filter-soft: rgba(41, 45, 51, 0.09);
--filter-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16v12H4zM3 6h18v3H3zM12 6v15M7.5 6C5 6 5 2.5 7.5 3c2 .4 3.2 3 4.5 3m4.5 0c2.5 0 2.5-3.5 0-3-2 .4-3.2 3-4.5 3'/%3E%3C/g%3E%3C/svg%3E");
}

.catalog-filter:hover {
background: var(--filter-soft);
border-color: var(--filter-accent);
box-shadow: 0 10px 24px color-mix(in srgb, var(--filter-accent) 15%, transparent);
}

.catalog-filter.is-active {
background: var(--filter-accent);
border-color: var(--filter-accent);
color: #fff;
box-shadow: 0 12px 26px color-mix(in srgb, var(--filter-accent) 26%, transparent);
}

.catalog-filter:focus-visible {
outline: 3px solid color-mix(in srgb, var(--filter-accent) 28%, transparent);
outline-offset: 3px;
}

.catalog-groups {
gap: 48px;
}

.catalog-group {
gap: 20px;
}

.catalog-group-heading {
max-width: 780px;
}

.catalog-group-heading h3 {
font-size: clamp(1.45rem, 2vw, 1.85rem);
margin-bottom: 7px;
}

.catalog-group-heading p {
color: #5d6d80;
}

.catalog-grid {
gap: 20px;
}

.catalog .product-card {
--card-accent: #008fbd;
padding: 24px 24px 26px;
border-radius: 24px;
border: 1px solid rgba(7, 29, 54, 0.065);
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 16px 38px rgba(7, 29, 54, 0.085);
}

.catalog .product-card:nth-child(4n + 2) {
--card-accent: #c9166a;
}

.catalog .product-card:nth-child(4n + 3) {
--card-accent: #d09500;
}

.catalog .product-card:nth-child(4n + 4) {
--card-accent: #292d33;
}

.catalog .product-card:hover {
border-color: color-mix(in srgb, var(--card-accent) 34%, white);
box-shadow: 0 22px 48px rgba(7, 29, 54, 0.12);
}

.catalog .product-card.has-image > .product-media,
.catalog .product-card.product-flyers .product-media-frame {
height: auto;
aspect-ratio: 4 / 3;
margin-bottom: 17px;
border-radius: 17px;
background: #eef2f5;
}

.catalog .product-card h3 {
font-size: 1.16rem;
line-height: 1.16;
margin-bottom: 10px;
}

.catalog .product-card h3::before {
content: "";
display: block;
width: 32px;
height: 3px;
margin-bottom: 12px;
border-radius: 999px;
background: var(--card-accent);
}

.catalog .product-card p {
color: #5a6b80;
font-size: 0.94rem;
line-height: 1.58;
margin-bottom: 24px;
}

@media (max-width: 768px) {
.benefits > .container {
width: min(100% - 28px, 560px);
}

.benefits .section-heading h2 {
font-size: clamp(2.25rem, 10vw, 3rem);
line-height: 1.02;
}

.benefits-title span,
.benefits-intro span {
white-space: normal;
}

.benefits .benefit-card {
min-height: 290px;
padding: 24px;
}

.benefits .benefit-card p {
max-width: none;
}

.catalog::before {
background-size: 1050px auto;
background-position: center top;
opacity: 0.42;
}

.catalog .section-heading h2 {
font-size: clamp(2.15rem, 10vw, 3rem);
}

.catalog-filters {
gap: 10px;
margin-inline: -14px;
padding: 4px 14px 8px;
}

.catalog-filter {
min-height: 44px;
padding: 9px 16px;
}

.catalog-groups {
gap: 34px;
}

.catalog .product-card {
padding: 20px 20px 23px;
border-radius: 20px;
}
}

@media (max-width: 480px) {
body {
font-size: 0.96rem;
}

.brand-name strong {
font-size: 0.95rem;
}

.brand-name small {
font-size: 0.78rem;
}

.nav-whatsapp {
font-size: 0.86rem;
padding: 10px 13px;
}

.section-label {
font-size: 0.7rem;
letter-spacing: 0.1em;
}

.section-label::before {
width: 24px;
}

.hero h1 {
font-size: 2.22rem;
}

.section-heading h2,
.final-cta-card h2 {
font-size: 2rem;
}

.benefits .section-heading h2 {
font-size: 2.12rem;
}

.benefits .benefit-card {
min-height: 275px;
}

.form {
border-radius: 24px;
}

input,
select,
textarea {
padding: 13px 14px;
}

.faq summary {
padding: 20px 54px 20px 20px;
}

.faq details p {
padding: 0 20px 20px;
}
}

/* Contacto rápido: panel técnico unificado con proceso CMYK */
.quick-contact {
padding: 82px 0;
background: #eaf5fc;
border-top-color: rgba(18, 61, 104, 0.08);
}

.quick-contact::before {
background-image:
linear-gradient(90deg, rgba(0, 169, 222, 0.22), rgba(0, 169, 222, 0.22)),
linear-gradient(90deg, rgba(237, 30, 121, 0.18), rgba(237, 30, 121, 0.18)),
linear-gradient(rgba(18, 61, 104, 0.13), rgba(18, 61, 104, 0.13)),
linear-gradient(90deg, rgba(18, 61, 104, 0.13), rgba(18, 61, 104, 0.13)),
radial-gradient(circle, transparent 0 13px, rgba(18, 61, 104, 0.13) 14px 15px, transparent 16px),
linear-gradient(rgba(18, 61, 104, 0.1), rgba(18, 61, 104, 0.1)),
linear-gradient(90deg, rgba(18, 61, 104, 0.1), rgba(18, 61, 104, 0.1));
background-position:
4% 15%,
96% 84%,
8% 12%,
8% 12%,
8% 12%,
94% 72%,
94% 72%;
background-size:
150px 1px,
160px 1px,
1px 74px,
74px 1px,
42px 42px,
1px 68px,
68px 1px;
background-repeat: no-repeat;
-webkit-mask-image:
linear-gradient(90deg, #000 0 15%, transparent 28% 72%, #000 85% 100%);
mask-image:
linear-gradient(90deg, #000 0 15%, transparent 28% 72%, #000 85% 100%);
opacity: 0.6;
}

.quick-contact::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
linear-gradient(45deg, transparent 48.5%, rgba(18, 61, 104, 0.08) 49%, rgba(18, 61, 104, 0.08) 51%, transparent 51.5%),
linear-gradient(-45deg, transparent 48.5%, rgba(18, 61, 104, 0.08) 49%, rgba(18, 61, 104, 0.08) 51%, transparent 51.5%),
linear-gradient(90deg, #00a9de 0 25%, #ed1e79 25% 50%, #f2b705 50% 75%, #292d33 75% 100%);
background-position: 94% 18%, 94% 18%, 4% 88%;
background-size: 54px 54px, 54px 54px, 132px 3px;
background-repeat: no-repeat;
opacity: 0.52;
}

.quick-contact-card {
grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
gap: clamp(34px, 3.2vw, 50px);
align-items: stretch;
padding: clamp(38px, 4.2vw, 58px);
border-radius: 38px;
background: rgba(255, 255, 255, 0.975);
border: 1px solid rgba(123, 157, 189, 0.25);
box-shadow: 0 14px 28px rgba(8, 38, 72, 0.1);
margin-inline: auto;
}

.quick-contact-content {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
padding: 6px 0;
}

.quick-contact-content .section-label {
margin-bottom: 20px;
color: #d36f00;
letter-spacing: 0.16em;
}

.quick-contact-content .section-label::before {
background: #e68100;
}

.quick-contact-content h2 {
max-width: 560px;
font-size: clamp(2.62rem, 3.1vw, 2.88rem);
line-height: 1.06;
letter-spacing: -0.052em;
margin-bottom: 24px;
}

.quick-contact-content h2::after {
content: "";
display: block;
width: min(224px, 48%);
height: 4px;
margin-top: 22px;
border-radius: 999px;
background: linear-gradient(90deg, #00a9de 0 25%, #ed1e79 25% 50%, #f2b705 50% 75%, #292d33 75% 100%);
}

.quick-contact-content p:not(.section-label) {
max-width: 610px;
margin-bottom: 32px;
color: #52677e;
font-size: 1.04rem;
line-height: 1.72;
}

.quick-contact-actions {
gap: 14px;
}

.quick-contact-actions .btn {
min-height: 56px;
padding: 14px 17px;
border-radius: 14px;
box-shadow: none;
font-size: 0.92rem;
}

.quick-contact-actions .btn-whatsapp {
box-shadow: 0 8px 18px rgba(37, 211, 102, 0.18);
}

.quick-contact-actions .btn-secondary {
background: #fff;
color: var(--navy);
border-color: rgba(18, 61, 104, 0.3);
box-shadow: 0 5px 12px rgba(8, 38, 72, 0.055);
}

.quick-contact-actions .btn-secondary:hover {
background: #f5f9fc;
border-color: rgba(18, 61, 104, 0.56);
color: var(--navy);
box-shadow: 0 7px 14px rgba(8, 38, 72, 0.075);
}

.quick-steps {
position: relative;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(14px, 1.35vw, 22px);
align-items: stretch;
padding: 30px 22px 22px;
border-radius: 28px;
background: #f7fbfe;
border: 1px solid rgba(123, 157, 189, 0.22);
}

.quick-steps::before {
content: "";
position: absolute;
top: 52px;
left: 13%;
right: 13%;
height: 1px;
background: rgba(85, 122, 158, 0.22);
}

.quick-step {
--step-accent: #008fbd;
--step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%230b3763' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15h32a7 7 0 0 1 7 7v19a7 7 0 0 1-7 7H29L18 56v-8h-6a7 7 0 0 1-7-7V22a7 7 0 0 1 7-7z'/%3E%3Cpath d='M51 27h2a6 6 0 0 1 6 6v15a6 6 0 0 1-6 6h-5v5l-8-5h-8'/%3E%3C/g%3E%3Cg fill='%2300a9de'%3E%3Ccircle cx='20' cy='31.5' r='2.5'/%3E%3Ccircle cx='28' cy='31.5' r='2.5'/%3E%3Ccircle cx='36' cy='31.5' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
min-width: 0;
min-height: 348px;
margin-top: 22px;
padding: 48px 20px 27px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(123, 157, 189, 0.24);
box-shadow: 0 4px 10px rgba(8, 38, 72, 0.035);
text-align: center;
}

.quick-step:nth-child(2) {
--step-accent: #d81470;
--step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%230b3763' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 13h7a7 7 0 0 1 12 0h7a5 5 0 0 1 5 5v37H14V18a5 5 0 0 1 5-5z'/%3E%3Cpath d='M26 13h12v7H26zM27 31h14M27 43h14'/%3E%3C/g%3E%3Cpath d='M20 30l2.5 2.5L27 27M20 42l2.5 2.5L27 39' fill='none' stroke='%23ed1e79' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.quick-step:nth-child(3) {
--step-accent: #c88a00;
--step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%230b3763' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 23l18-9 18 9-18 10zM17 23v22l18 10 18-10V23M35 33v22M25 19l18 10'/%3E%3C/g%3E%3Cpath d='M5 33h13M8 40h10M11 47h7' fill='none' stroke='%23f2b705' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.quick-step::before {
content: "";
flex: 0 0 72px;
width: 72px;
height: 72px;
margin-bottom: 18px;
border-radius: 50%;
border: 1px solid rgba(123, 157, 189, 0.18);
background-color: #f1f7fb;
background-image: var(--step-icon);
background-position: center;
background-repeat: no-repeat;
background-size: 50px 50px;
}

.quick-step span {
position: absolute;
top: -30px;
left: 50%;
display: grid;
place-items: center;
width: 58px;
height: 58px;
margin: 0;
transform: translateX(-50%);
border: 4px solid #fff;
outline: 1px solid color-mix(in srgb, var(--step-accent) 52%, white);
background: var(--step-accent);
color: #fff;
font-size: 1.18rem;
font-weight: 900;
box-shadow: none;
}

.quick-step h3 {
max-width: 190px;
margin-bottom: 14px;
font-size: 1.08rem;
line-height: 1.24;
}

.quick-step p {
max-width: 190px;
color: #5a6d83;
font-size: 0.92rem;
line-height: 1.62;
}

.quick-step::after {
content: "";
width: 64px;
height: 2px;
margin-top: auto;
border-radius: 999px;
background: linear-gradient(90deg, transparent, var(--step-accent) 24% 76%, transparent);
}

@media (max-width: 1100px) {
.quick-contact-card {
grid-template-columns: 1fr;
gap: 38px;
}

.quick-contact-content {
max-width: 740px;
}

.quick-step {
min-height: 310px;
}
}

@media (min-width: 1101px) {
.catalog-filters {
flex-wrap: nowrap;
width: fit-content;
max-width: 100%;
}

.quick-contact {
align-items: center;
padding-top: 42px;
padding-bottom: 80px;
}

.quick-contact > .container {
width: min(88%, 1450px);
max-width: none;
}
}

@media (min-width: 1101px) and (max-width: 1400px) {
.quick-contact-card {
grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr);
gap: 28px;
}

.quick-steps {
gap: 10px;
padding-inline: 14px;
}

.quick-step {
padding-inline: 15px;
}

.quick-contact-actions .btn {
padding-inline: 10px;
font-size: 0.88rem;
}
}

@media (max-width: 720px) {
.quick-contact {
padding: 52px 0;
}

.quick-contact::before,
.quick-contact::after {
opacity: 0.38;
}

.quick-contact-card {
gap: 32px;
padding: 28px 20px;
border-radius: 26px;
}

.quick-contact-content .section-label {
margin-bottom: 16px;
}

.quick-contact-content h2 {
font-size: clamp(2.15rem, 10vw, 2.75rem);
margin-bottom: 20px;
}

.quick-contact-content h2::after {
margin-top: 18px;
}

.quick-contact-content p:not(.section-label) {
margin-bottom: 26px;
font-size: 1rem;
}

.quick-contact-actions .btn {
width: 100%;
min-height: 54px;
}

.quick-steps {
grid-template-columns: 1fr;
gap: 34px;
padding: 28px 16px 20px;
border-radius: 22px;
}

.quick-steps::before {
top: 46px;
bottom: 46px;
left: 50%;
right: auto;
width: 1px;
height: auto;
}

.quick-step {
min-height: 278px;
padding: 46px 24px 24px;
}
}

@media (min-width: 721px) and (max-width: 768px) {
.quick-contact-card {
gap: 34px;
padding: 32px 24px;
}

.quick-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 34px 18px;
padding: 30px 18px 22px;
}

.quick-step {
min-height: 290px;
}

.quick-step:nth-child(3) {
grid-column: 1 / -1;
}
}

@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}

*,
*::before,
*::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}

.reveal-section > .container,
.final-cta.reveal-section > .container {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}

.reveal-section.is-leaving > .container,
.final-cta.reveal-section.is-leaving > .container {
opacity: 1 !important;
transform: none !important;
}

.nav-link:hover .nav-link-label,
.nav-link:focus-visible .nav-link-label {
transform: none;
}

.btn:hover,
.nav-whatsapp:hover,
.benefit-card:hover,
.product-card:hover,
.gallery-card:hover,
.floating-whatsapp:hover {
transform: none;
}
}