/* ===================================================================
CÁRNICAS DISCARPE — ESTILOS GLOBALES
Paleta: Negro Premium · Dorado · Crema
Arquitectura: SEO · GEO · AEO · UX · CRO
Vitaliza Agency · Abril 2026
=================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800;900&family=Cormorant+Garamond:wght@500;600;700&display=swap');
/* ── VARIABLES ──────────────────────────────────────────────────── */
:root {
--negro: #030102;
--negro-card: #131313;
--negro-mid: #1c1c1c;
--negro-light: #252525;
--dorado: #C9A84C;
--dorado-claro: #E2C27A;
--dorado-oscuro:#A88630;
--beige: #F5E0AA;
--beige-fondo: #FBF0D8;
--beige-borde: #E8D08A;
--blanco: #FFFFFF;
--gris: #777777;
--gris-medio: #999999;
--gris-claro: #CCCCCC;
--gris-texto: #999999;
--verde-wa: #25D366;
--font-principal: 'Raleway', sans-serif;
--font-display: 'Cormorant Garamond', serif;
--transicion: all 0.3s ease;
--sombra-card: 0 8px 32px rgba(0,0,0,0.5);
--sombra-gold: 0 8px 24px rgba(201,168,76,0.35);
--radio: 6px;
--nav-h: 80px;
}
/* ── RESET ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
font-size: 16px;
/* Defensivo: en WP con plugins (Elementor, etc.) algun selector puede
hacer que body overflow-x: hidden no sea suficiente. Blindando
tambien garantizamos que NUNCA hay scroll lateral. */
overflow-x: hidden;
max-width: 100%;
}
@supports (overflow: clip) {
html { overflow-x: clip; }
}
body {
font-family: var(--font-principal);
background: var(--negro);
color: var(--blanco);
line-height: 1.7;
/* iOS Safari <15 no soporta overflow-x: clip y cae a visible (overflow horizontal). Fallback
con @supports: navegadores modernos usan clip (no rompe sticky); legacy iOS usa hidden. */
overflow-x: hidden;
max-width: 100%;
}
@supports (overflow: clip) {
body { overflow-x: clip; }
}
img { max-width: 100%; height: auto; display: block; }
/* Twemoji: los emojis convertidos a ![]()
heredan el tamaño del font-size
del contenedor, no ocupan el 100% del padre como imágenes normales. */
img.emoji {
display: inline-block !important;
width: 1em !important;
height: 1em !important;
max-width: none !important;
margin: 0;
vertical-align: -0.1em;
}
a { text-decoration: none; color: inherit; transition: var(--transicion); }
ul { list-style: none; }
button { cursor: pointer; }
/* ── TIPOGRAFÍA ─────────────────────────────────────────────────── */
h1 { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.15; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.8rem); font-weight: 700; line-height: 1.2; }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.6rem); font-weight: 700; line-height: 1.3; }
h4 { font-size: 1rem; font-weight: 700; }
p { font-size: 1rem; color: var(--gris-claro); line-height: 1.85; }
strong { font-weight: 700; }
/* ── ETIQUETA DE SECCIÓN ────────────────────────────────────────── */
.label-seccion {
display: flex;
align-items: center;
gap: 0.7rem;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--dorado);
margin-bottom: 1.2rem;
}
.label-seccion::before {
content: '';
width: 28px;
height: 2px;
background: var(--dorado);
flex-shrink: 0;
}
/* ── LAYOUT ─────────────────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; }
.text-center { text-align: center; }
/* ── NAVEGACIÓN ─────────────────────────────────────────────────── */
/* `!important` defensivo: Elementor inyecta `body.elementor-page` con
resets que pueden afectar a position/top de elementos top-level.
Mantiene desktop intocado (los valores son los mismos), solo blinda
contra sobreescritura silenciosa en WP. Reportado 15-05-2026: en
producción el nav no se quedaba arriba al hacer scroll. */
.nav {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 1000;
height: var(--nav-h);
background: rgba(3,1,2,0.97);
/* backdrop-filter eliminado: fondo ya 97 % opaco, el blur apenas se notaba pero forzaba a la GPU a recalcular en cada frame del scroll (causa principal del "peso al hacer scroll", reportado 12-05-2026). */
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2.5rem;
border-bottom: 1px solid rgba(201,168,76,0.15);
transition: var(--transicion);
}
.nav.scrolled { background: rgba(3,1,2,1); box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
.nav-logo { display: flex; align-items: center; height: var(--nav-h); }
.nav-logo img { max-height: var(--nav-h); height: auto; width: auto; display: block; }
.nav-links {
display: flex;
align-items: center;
gap: 1.8rem;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
}
/* Todos los tienen la altura completa del nav y centran su contenido */
.nav-links > li {
display: flex;
align-items: center;
height: var(--nav-h);
}
/* Todos los usan el mismo modelo flex para alineación idéntica */
.nav-links > li > a {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--blanco);
position: relative;
padding-bottom: 4px;
}
.nav-links > li > a::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 0; height: 1.5px;
background: var(--dorado);
transition: var(--transicion);
}
.nav-links > li > a:hover,
.nav-links > li > a.activo { color: var(--dorado); }
.nav-links > li > a:hover::after,
.nav-links > li > a.activo::after { width: 100%; }
/* Dropdown */
.nav-dropdown { position: relative; }
/* Puente transparente que cubre el hueco entre el link y el menú desplegado,
evitando que el hover se pierda al cruzar el gap */
.nav-dropdown::after {
content: '';
position: absolute;
top: 100%;
left: -20px;
right: -20px;
height: 8px;
background: transparent;
display: block;
}
.nav-dropdown > a {
display: flex;
align-items: center;
gap: 0.35rem;
}
.nav-dropdown > a::after { display: none !important; }
.chevron {
font-size: 0.55rem;
margin-top: 1px;
transition: var(--transicion);
display: inline-block;
}
.nav-dropdown:hover .chevron { transform: rotate(180deg); color: var(--dorado); }
.dropdown-menu {
position: absolute;
top: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: var(--negro-card);
border: 1px solid rgba(201,168,76,0.22);
border-radius: var(--radio);
padding: 0.4rem 0;
min-width: 220px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
transform: translateX(-50%) translateY(-6px);
box-shadow: var(--sombra-card);
}
.nav-dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: all;
transform: translateX(-50%) translateY(0);
}
/* Flecha del dropdown */
.dropdown-menu::before {
content: '';
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top: none;
border-bottom-color: rgba(201,168,76,0.22);
}
.dropdown-menu li { }
.dropdown-menu li a {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.65rem 1.4rem;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--gris-claro);
border-bottom: 1px solid rgba(255,255,255,0.04);
transition: var(--transicion);
}
.dropdown-menu li:last-child a { border-bottom: none; }
.dropdown-menu li a:hover {
background: rgba(201,168,76,0.07);
color: var(--dorado);
padding-left: 1.8rem;
}
.dropdown-menu li a .ddot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--dorado);
opacity: 0.5;
flex-shrink: 0;
transition: var(--transicion);
}
.dropdown-menu li a:hover .ddot { opacity: 1; }
/* Submenu lateral (flyout) dentro del dropdown principal */
.nav-sub-dropdown {
position: relative;
}
/* Puente invisible que extiende el hover area de nav-sub-dropdown hasta el flyout.
Imprescindible: sin él, el cursor pierde el :hover al cruzar el gap y todo se cierra.
Solo activo cuando el dropdown padre está abierto (pointer-events se propaga desde .dropdown-menu). */
.nav-sub-dropdown::after {
content: '';
position: absolute;
top: 0;
left: 100%;
width: 18px;
height: 100%;
background: transparent;
}
.nav-sub-dropdown > .dropdown-item {
justify-content: space-between;
gap: 0.8rem;
}
.nav-sub-dropdown > .dropdown-item .flyout-arrow {
font-size: 0.95rem;
color: var(--dorado);
opacity: 0.55;
transition: var(--transicion);
flex-shrink: 0;
}
.nav-sub-dropdown:hover > .dropdown-item .flyout-arrow {
opacity: 1;
transform: translateX(3px);
}
.flyout-menu {
position: absolute;
top: -0.5rem;
left: 100%;
margin-left: 6px;
background: var(--negro-card);
border: 1px solid rgba(201,168,76,0.22);
border-radius: var(--radio);
padding: 0.4rem 0;
min-width: 260px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateX(-4px);
transition: opacity 0.2s ease, transform 0.2s ease;
box-shadow: var(--sombra-card);
z-index: 1001;
}
.nav-sub-dropdown:hover > .flyout-menu {
opacity: 1;
visibility: visible;
pointer-events: all;
transform: translateX(0);
}
/* RRSS en nav */
.nav-rrss {
display: flex;
align-items: center;
gap: 1rem;
}
.nav-rrss a { font-size: 0.95rem; color: var(--gris-medio); }
.nav-rrss a:hover { color: var(--dorado); }
/* ── HERO ──────────────────────────────────────────────────────── */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
padding-top: var(--nav-h);
}
.hero-bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.72) 100%);
background-color: #1a2a10;
background-size: cover;
background-position: center;
z-index: 0;
}
.hero-bg.bg-cattle {
background-image:
linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.72) 100%),
url('https://images.unsplash.com/photo-1500595046743-cd271d694d30?auto=format&w=1920&q=80');
}
.hero-content {
position: relative;
z-index: 1;
max-width: 860px;
padding: 2rem 1.5rem;
}
.hero h1 { color: var(--blanco); text-shadow: 0 2px 24px rgba(0,0,0,0.6); margin-bottom: 1.5rem; }
/* ── PAGE HERO (páginas interiores) ────────────────────────────── */
.page-hero {
height: 42vh;
min-height: 320px;
display: flex;
align-items: flex-end;
justify-content: flex-start;
position: relative;
margin-top: var(--nav-h);
overflow: hidden;
}
.page-hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 0;
}
.page-hero-bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.85) 30%, rgba(0,0,0,0.3) 100%);
}
.page-hero-content {
position: relative;
z-index: 1;
padding: 3rem 3rem 3.5rem;
max-width: 900px;
}
.page-hero h1 { color: var(--blanco); font-size: clamp(1.8rem, 4vw, 3rem); margin-bottom: 0.8rem; }
.breadcrumb {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.78rem;
color: rgba(255,255,255,0.55);
}
.breadcrumb a { color: var(--dorado); }
.breadcrumb .sep { opacity: 0.5; }
/* ── BOTONES ────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.9rem 2rem;
font-family: var(--font-principal);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: var(--radio);
transition: var(--transicion);
border: none;
white-space: nowrap;
}
.btn-primary {
background: var(--dorado);
color: var(--negro);
}
.btn-primary:hover {
background: var(--dorado-claro);
transform: translateY(-2px);
box-shadow: var(--sombra-gold);
}
.btn-outline {
background: transparent;
color: var(--blanco);
border: 1.5px solid rgba(255,255,255,0.45);
}
.btn-outline:hover {
border-color: var(--dorado);
color: var(--dorado);
transform: translateY(-2px);
}
.btn-gold-outline {
background: transparent;
color: var(--dorado);
border: 1.5px solid var(--dorado);
}
.btn-gold-outline:hover {
background: var(--dorado);
color: var(--negro);
transform: translateY(-2px);
}
.btn-dark {
background: var(--negro-mid);
color: var(--blanco);
border: 1px solid rgba(255,255,255,0.1);
}
.btn-dark:hover { border-color: var(--dorado); color: var(--dorado); }
.btn i, .btn svg { font-size: 0.9em; }
.btn-sm { padding: 0.65rem 1.4rem; font-size: 0.72rem; }
/* Arrow link */
.arrow-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--dorado);
}
.arrow-link::after { content: '→'; transition: var(--transicion); }
.arrow-link:hover { gap: 0.8rem; }
.arrow-link:hover::after { transform: translateX(3px); }
/* ── TRUST BAR ──────────────────────────────────────────────────── */
.trust-bar {
background: var(--negro-mid);
padding: 2.5rem 3rem;
border-top: 1px solid rgba(201,168,76,0.12);
border-bottom: 1px solid rgba(201,168,76,0.12);
}
.trust-item { text-align: center; flex: 1; min-width: 100px; }
.trust-num {
display: block;
font-size: 2rem;
font-weight: 900;
color: var(--dorado);
line-height: 1;
margin-bottom: 0.4rem;
}
.trust-txt {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gris-claro);
}
/* ── FEATURE BOXES ──────────────────────────────────────────────── */
.feature-box {
background: var(--negro-mid);
border: 1px solid rgba(201,168,76,0.1);
border-radius: var(--radio);
padding: 2.5rem 2rem;
transition: var(--transicion);
}
.feature-box:hover {
border-color: rgba(201,168,76,0.4);
transform: translateY(-4px);
box-shadow: var(--sombra-card);
}
.feature-icon { font-size: 2rem; margin-bottom: 1.2rem; display: block; }
.feature-box h3 { color: var(--dorado); font-size: 1.05rem; margin-bottom: 0.8rem; }
.feature-box p { font-size: 0.9rem; }
/* ── CARDS DE BLOG ──────────────────────────────────────────────── */
.blog-grid {
display: grid;
/* `min(340px, 100%)` evita que el track 340px fuerce overflow en
viewports estrechos (causa de +4px en index 360w). Desktop
identico al estado previo. */
grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
gap: 2rem;
margin-top: 3rem;
}
.blog-card {
background: var(--negro-mid);
border-radius: var(--radio);
overflow: hidden;
display: flex;
flex-direction: column;
border: 1px solid rgba(201,168,76,0.1);
transition: var(--transicion);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-card); border-color: rgba(201,168,76,0.28); }
.blog-card-img {
height: 200px;
background: var(--negro-card);
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.blog-card-cat {
position: absolute;
top: 1rem; left: 1rem;
background: var(--dorado);
color: var(--negro);
font-size: 0.6rem;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.28rem 0.75rem;
border-radius: 3px;
}
.blog-card-body { padding: 1.8rem; flex: 1; display: flex; flex-direction: column; }
.blog-card-body h3 { font-size: 1.05rem; margin-bottom: 0.8rem; }
.blog-card-body p { font-size: 0.88rem; flex: 1; margin-bottom: 1.5rem; }
/* ── TABLA ──────────────────────────────────────────────────────── */
.tabla-wrap { overflow-x: auto; margin-top: 2rem; }
/* Affordance scroll: fade lateral derecho indica contenido oculto cuando
la tabla supera el wrapper. Solo visible <=640 (donde la tabla compara-
tiva 3-col no cabe). Desktop intocado. */
@media (max-width: 640px) {
.tabla-wrap {
-webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 28px), transparent 100%);
mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 28px), transparent 100%);
}
}
.tabla {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.tabla th {
background: var(--negro-mid);
color: var(--dorado);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 1rem 1.2rem;
text-align: left;
border-bottom: 2px solid rgba(201,168,76,0.3);
}
.tabla td {
padding: 0.9rem 1.2rem;
color: var(--gris-claro);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tabla tr:hover td { background: rgba(201,168,76,0.04); }
.tabla td:first-child { font-weight: 700; color: var(--blanco); }
/* ── FAQ ACCORDION ──────────────────────────────────────────────── */
.faq-list { margin-top: 2.5rem; }
.faq-item { border-bottom: 1px solid rgba(255,255,255,0.08); }
.section-beige .faq-item { border-bottom-color: rgba(0,0,0,0.1); }
.section-beige .faq-question { color: var(--negro); }
.section-beige .faq-question:hover { color: var(--dorado); }
.section-beige .faq-answer p { color: #4a4236; }
/* (Bloque ".steps / .step / .step-num / .step-body" eliminado 15-05-2026.
Era de un componente timeline antiguo sin usos en HTML/PHP. Las clases
genéricas también colisionaban con Elementor en producción. Reemplazado
por namespaces propios: .timeline-* (Nosotros), .dist-step-*
(Distribuidores), .dryaged-* (Chuletones)). */
/* ── FORMULARIO ─────────────────────────────────────────────────── */
.form-bifurcacion {
display: flex;
border-radius: var(--radio);
overflow: hidden;
border: 1px solid rgba(201,168,76,0.25);
margin-bottom: 2.5rem;
}
.bif-btn {
flex: 1;
padding: 1rem;
background: var(--negro-mid);
border: none;
color: var(--gris-claro);
font-family: var(--font-principal);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: var(--transicion);
border-right: 1px solid rgba(201,168,76,0.15);
}
.bif-btn:last-child { border-right: none; }
.bif-btn.activo { background: var(--dorado); color: var(--negro); }
.bif-btn:not(.activo):hover { background: var(--negro-light); color: var(--blanco); }
.form-panel { display: none; }
.form-panel.activo { display: block; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.2rem; }
.form-group.full { grid-column: 1 / -1; }
.form-label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gris-claro);
}
.form-input,
.form-select,
.form-textarea {
width: 100%;
background: var(--negro-mid);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 4px;
padding: 0.9rem 1.1rem;
color: var(--blanco);
font-family: var(--font-principal);
font-size: 0.95rem;
transition: var(--transicion);
-webkit-appearance: none;
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--gris); }
.form-input:focus,
.form-select:focus,
.form-textarea:focus { outline: none; border-color: var(--dorado); background: rgba(201,168,76,0.05); }
.form-textarea { min-height: 110px; resize: vertical; }
.form-select { cursor: pointer; }
.form-note {
font-size: 0.78rem;
color: var(--gris);
margin-top: 0.8rem;
line-height: 1.6;
}
/* ── CERTIFICACIONES ─────────────────────────────────────────────── */
.cert-badge {
width: 86px; height: 86px;
border-radius: 50%;
background: var(--negro-mid);
border: 2px solid rgba(201,168,76,0.2);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.6rem;
font-weight: 800;
text-align: center;
color: var(--dorado);
letter-spacing: 0.05em;
text-transform: uppercase;
line-height: 1.4;
transition: var(--transicion);
padding: 0.5rem;
}
.cert-badge:hover { border-color: var(--dorado); transform: scale(1.08); box-shadow: var(--sombra-gold); }
.cert-display .cert-badge { width: 160px; height: 160px; padding: 1.5rem; }
/* ── CTA SECTION ────────────────────────────────────────────────── */
.cta-section {
text-align: center;
padding: 7rem 3rem;
}
.cta-section h2 { margin-bottom: 1.2rem; }
.cta-section > p { max-width: 580px; margin: 0 auto 2.5rem; }
/* CTA bifurcado (hostelero + distribuidor) */
.cta-bifurcado {
margin-top: 0;
}
.newsletter-form { display: flex; gap: 1rem; max-width: 480px; margin: 0 auto; }
.newsletter-form input { flex: 1; }
/* ── WHATSAPP FLOTANTE ───────────────────────────────────────────── */
.whatsapp-float {
position: fixed;
bottom: 2rem; right: 2rem;
width: 58px; height: 58px;
background: var(--verde-wa);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 20px rgba(0,0,0,0.35);
z-index: 999;
transition: var(--transicion);
}
.whatsapp-float:hover { transform: scale(1.06); box-shadow: 0 10px 28px rgba(0,0,0,0.45); }
.whatsapp-float svg { width: 30px; height: 30px; fill: white; }
/* ── FOOTER ──────────────────────────────────────────────────────── */
.footer {
background: #030102;
border-top: 1px solid rgba(201,168,76,0.14);
padding: 4.5rem 3rem 2rem;
}
.footer-inner {
max-width: 1200px;
margin: 0 auto;
}
.footer-grid {
display: grid;
grid-template-columns: 1.8fr 1fr 1fr;
gap: 3rem;
padding-bottom: 3rem;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-logo { height: 52px; margin-bottom: 1.2rem; }
.footer-desc { font-size: 0.88rem; color: var(--gris); line-height: 1.75; }
.footer-col h4 {
font-size: 0.7rem;
font-weight: 900;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--dorado);
margin-bottom: 1.2rem;
}
.footer-col ul li { margin-bottom: 0.65rem; }
.footer-col ul li a { font-size: 0.88rem; color: var(--gris); }
.footer-col ul li a:hover { color: var(--blanco); }
.footer-contact li {
display: flex;
align-items: flex-start;
gap: 0.8rem;
font-size: 0.88rem;
color: var(--gris);
margin-bottom: 0.8rem;
line-height: 1.5;
}
.footer-contact .ico { color: var(--dorado); margin-top: 2px; flex-shrink: 0; }
.footer-bottom {
max-width: 1200px;
margin: 2rem auto 0;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.78rem;
color: var(--gris);
flex-wrap: wrap;
gap: 1rem;
}
.footer-bottom a { color: var(--dorado); }
.footer-rrss { display: flex; gap: 1.1rem; }
.footer-rrss a { color: var(--gris); font-size: 1rem; }
.footer-rrss a:hover { color: var(--dorado); }
/* ── UTILIDADES ──────────────────────────────────────────────────── */
.divider {
width: 60px; height: 3px;
background: var(--dorado);
margin: 1.5rem 0;
}
.divider.centrado { margin: 1.5rem auto; }
.tag {
display: inline-block;
padding: 0.28rem 0.75rem;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: 3px;
background: rgba(201,168,76,0.12);
color: var(--dorado);
border: 1px solid rgba(201,168,76,0.25);
}
/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 1100px) {
.nav { padding: 0 1.5rem; }
.nav-links { gap: 1.2rem; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
.nav-links, .nav-rrss { display: none; }
.cta-bifurcado { grid-template-columns: 1fr; }
.form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.trust-bar { padding: 2rem 1.5rem; }
.footer { padding: 3.5rem 1.5rem 1.5rem; }
.footer-grid { grid-template-columns: 1fr; gap: 2rem; }
.page-hero-content { padding: 2rem 1.5rem 2.5rem; }
.newsletter-form { flex-direction: column; }
.cta-section { padding: 4.5rem 1.5rem; }
}
/* ===================================================================
SUPPLEMENT — Class aliases and new components for page templates
Aligns HTML class names with design system
=================================================================== */
/* ── DATOS PENDIENTES DE REVISIÓN (resaltado en rojo) ──────────────── */
/* Usar en cualquier dato inventado o no confirmado con el cliente */
.pending-data {
color: #e53e3e !important;
font-weight: 700;
background: rgba(229,62,62,0.07);
padding: 1px 5px;
border-radius: 3px;
border: 1px dashed rgba(229,62,62,0.45);
font-style: italic;
}
/* ── NAV INNER / ALIASES ───────────────────────────────────────────── */
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0; /* nav itself already has padding: 0 2.5rem */
}
.nav-scrolled { background: rgba(3,1,2,1) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
.nav-link { display: flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--blanco); position: relative; padding-bottom: 4px; transition: var(--transicion); white-space: nowrap; }
.nav-link:hover, .nav-link-active { color: var(--dorado); }
.btn.nav-link-active, .btn-primary.nav-link-active { color: var(--negro); }
.nav-cta { margin-left: 1rem; flex-shrink: 0; }
.dropdown-arrow { font-size: 0.5rem; margin-left: 2px; display: inline-block; transition: transform 0.25s ease; }
.nav-dropdown:hover .dropdown-arrow { transform: rotate(180deg); }
.dropdown-item { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 1.2rem; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em; color: var(--gris-claro); transition: var(--transicion); white-space: nowrap; }
.dropdown-item:hover { background: rgba(201,168,76,0.07); color: var(--dorado); padding-left: 1.5rem; }
.dropdown-badge { display: inline-block; font-size: 0.58rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 3px; background: rgba(201,168,76,0.15); border: 1px solid rgba(201,168,76,0.4); color: var(--dorado); flex-shrink: 0; }
/* Hamburger (new naming) */
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 0.5rem; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--blanco); border-radius: 2px; transition: var(--transicion); }
.hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-active span:nth-child(2) { opacity: 0; }
.hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Nav overlay (mobile) */
.nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 998; }
.nav-overlay.is-active { display: block; }
/* Nav links mobile open */
@media (max-width: 900px) {
.hamburger { display: flex; }
.nav-cta { display: none; }
/* Drawer que se despliega desde debajo del nav */
.nav-links {
display: none;
position: fixed;
top: var(--nav-h);
left: 0; right: 0;
height: auto !important;
max-height: calc(100vh - var(--nav-h));
overflow-y: auto;
background: var(--negro);
border-top: 1px solid rgba(201,168,76,0.2);
box-shadow: 0 20px 40px rgba(0,0,0,0.75);
padding: 0.5rem 1.5rem 1.5rem;
flex-direction: column;
gap: 0;
z-index: 999;
}
.nav-links.is-open { display: flex; }
/* Cada item del menú ocupa su propia fila, altura según contenido */
.nav-links > li {
display: block !important;
width: 100%;
height: auto !important;
flex-shrink: 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-links > li:last-child { border-bottom: none; }
/* Link principal del item */
.nav-links > li > a,
.nav-link {
display: flex !important;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 1rem 0 !important;
font-size: 0.95rem !important;
letter-spacing: 0.08em;
border-bottom: none !important;
height: auto !important;
color: var(--blanco);
}
.nav-links > li > a::after { display: none; }
/* Dropdown acordeón: colapsado por defecto, se expande al tocar */
.dropdown-menu {
position: static;
opacity: 1;
visibility: visible;
pointer-events: all;
transform: none;
box-shadow: none;
max-height: 0;
overflow: hidden;
padding: 0 0.8rem;
margin: 0;
border: 1px solid transparent;
background: transparent;
border-radius: 6px;
transition: max-height 0.35s ease, padding 0.3s ease, margin 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.dropdown-menu::before { display: none; } /* Oculta flecha del dropdown desktop */
.nav-dropdown.is-open .dropdown-menu {
max-height: 640px;
padding: 0.3rem 0.8rem 0.5rem;
margin: 0 0 0.8rem;
background: rgba(255,255,255,0.035);
border-color: rgba(201,168,76,0.15);
}
.nav-dropdown > a .dropdown-arrow,
.nav-dropdown > a .chevron {
transition: transform 0.3s ease;
font-size: 0.7rem;
margin-left: auto;
}
.nav-dropdown.is-open > a .dropdown-arrow,
.nav-dropdown.is-open > a .chevron { transform: rotate(180deg); color: var(--dorado); }
/* Items dentro del dropdown */
.dropdown-item {
padding: 0.7rem 0 !important;
border-bottom: 1px solid rgba(255,255,255,0.05) !important;
font-size: 0.85rem !important;
white-space: normal;
display: flex !important;
align-items: center;
gap: 0.5rem;
}
.dropdown-menu a:last-child { border-bottom: none !important; }
.nav-dropdown:hover .dropdown-menu { transform: none; }
/* Flyout lateral → acordeón inline en mobile */
.nav-sub-dropdown { width: 100%; }
.nav-sub-dropdown::after { display: none; } /* sin puente en mobile: flyout es acordeón vertical */
.nav-sub-dropdown > .dropdown-item {
justify-content: space-between !important;
}
.nav-sub-dropdown > .dropdown-item .flyout-arrow {
margin-left: auto;
transition: transform 0.3s ease;
font-size: 1rem;
}
.nav-sub-dropdown.is-open > .dropdown-item .flyout-arrow {
transform: rotate(90deg);
color: var(--dorado);
}
.flyout-menu {
position: static;
opacity: 1;
visibility: visible;
pointer-events: all;
transform: none;
margin-left: 0;
min-width: 0;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
padding: 0 0 0 0.9rem;
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease;
}
.nav-sub-dropdown.is-open > .flyout-menu {
max-height: 400px;
}
/* Permitir wrap en títulos largos (override del nowrap global) */
.section-title,
.section-title em,
.hero-title,
.hero-title em,
.page-hero-title,
.page-hero-title em {
white-space: normal !important;
overflow-wrap: break-word;
word-wrap: break-word;
}
/* Desactivar hover de la flecha en mobile — solo el click la rota */
.nav-dropdown:hover .chevron,
.nav-dropdown:hover .dropdown-arrow {
transform: none !important;
color: inherit !important;
}
/* Footer reorganizado en mobile con grid-areas:
1) Brand centrado arriba (identidad)
2) Contacto (CTA primero — prioridad conversión)
3) Nav1 | Nav2 en 2 columnas (navegación secundaria) */
.footer-grid {
grid-template-columns: 1fr 1fr !important;
grid-template-areas:
"brand brand"
"contact contact"
"nav1 nav2" !important;
gap: 2.5rem 1.2rem !important;
}
.footer-grid > :nth-child(1) { grid-area: brand; text-align: center; }
.footer-grid > :nth-child(2) { grid-area: nav1; }
.footer-grid > :nth-child(3) { grid-area: nav2; }
/* Contacto comercial ocupa span de 2 cols (sola en su fila): centrada
horizontalmente con max-width para que el botón CTA no se estire. */
.footer-grid > :nth-child(4) {
grid-area: contact;
text-align: center;
max-width: 380px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
/* Brand centrado: logo y textos alineados al centro en mobile */
.footer-brand img { margin: 0 auto 1rem; }
.footer-brand .footer-tagline { text-align: center; }
.footer-brand .footer-cert { justify-content: center; display: flex; align-items: center; gap: 0.5rem; }
}
/* Ocultar el de CTA mobile que añadimos al menú (no se usa) */
.nav-mobile-cta { display: none !important; }
/* ── HERO OVERLAY / ALIASES ──────────────────────────────────────── */
.hero-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0.7) 100%), linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.85) 100%); z-index: 0; }
.hero-eyebrow { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dorado); margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.8rem; justify-content: center; }
.hero-eyebrow::before { content:''; width:28px; height:2px; background:var(--dorado); }
.hero-eyebrow::after { content:''; width:28px; height:2px; background:var(--dorado); }
.hero-title { color: var(--blanco); text-shadow: 0 2px 24px rgba(0,0,0,0.6); margin-bottom: 1.5rem; font-family: var(--font-display); font-weight: 600; }
.hero-title em { font-style: italic; color: var(--dorado); }
.hero-subtitle { font-size: 1.05rem; color: rgba(255,255,255,0.88); max-width: 620px; margin: 0 auto 2.5rem; line-height: 1.75; }
.hero-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero-scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2; }
.hero-scroll-indicator span { display: block; width: 2px; height: 40px; background: linear-gradient(to bottom, transparent, var(--dorado)); animation: scrollAnim 1.8s ease infinite; }
@keyframes scrollAnim { 0%,100%{opacity:0.3;transform:scaleY(0.5)} 50%{opacity:1;transform:scaleY(1)} }
/* ── TRUST BAR ALIASES ───────────────────────────────────────────── */
.trust-bar-grid { display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; gap: 1.5rem; }
.trust-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris-claro); display: block; }
.trust-num.geo, .trust-num.cert { font-size: 1.1rem; }
/* ── SECTION UTILITY CLASSES ────────────────────────────────────── */
.section { padding: 6rem 2.5rem; }
.section-dark { background: var(--negro-card); }
.section-beige { background: var(--beige-fondo); }
.section-eyebrow { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dorado); display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
.section-eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--dorado); flex-shrink: 0; }
.section-title { margin-bottom: 1.2rem; white-space: nowrap; }
.section-title em { font-style: italic; color: var(--dorado); font-family: var(--font-display); white-space: nowrap; }
.section-subtitle { color: var(--gris-claro); max-width: 1150px; font-size: 1rem; margin-left: auto; margin-right: auto; }
.text-centered-narrow { max-width: 720px; margin: 0 auto; text-align: center; }
.text-center { text-align: center; }
/* ── LEGIBILIDAD EN DESKTOP GRANDE (≥1280) ────────────────────────────
Limita el ancho de línea de párrafos del cuerpo a ~65-72 caracteres.
Convención tipográfica: 60-75 caracteres por línea para legibilidad
óptima. >100 cansa la vista en pantallas grandes.
- Párrafos directos en .container y glosario: 72ch.
- Subtitles centrados de sección y descripciones de cards: 65ch.
- Cuerpo de descripción dentro de cards específicas: 60ch.
Containers con max-width propio (.text-centered-narrow, .split-50-text,
cards estrechas, etc.) NO se afectan porque ya están limitados. */
@media (min-width: 1280px) {
.section > .container > p,
.glosario-term dd {
max-width: 72ch;
}
/* Subtitle centrado bajo el H2 de sección: el max-width: 1150px previo
era equivalente a ~140ch en 14px (ilegible). Bajado a 65ch + centrado. */
.section-subtitle {
max-width: 65ch;
}
/* Descripciones en cards de feature/clasif/producto: 60ch para mantener
la card compacta y legible sin que el párrafo se estire. */
.feature-text,
.clasif-desc,
.product-card-text,
.corte-card-desc,
.feature-box p,
.prop-desc,
.rama-desc,
.origen-card-desc {
max-width: 60ch;
}
}
/* ── FEATURE GRID ALIASES ────────────────────────────────────────── */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 3rem; }
.feature-icon { margin-bottom: 1.2rem; }
.feature-title { color: var(--dorado); font-size: 1.05rem; margin-bottom: 0.8rem; }
.feature-text { font-size: 0.9rem; color: var(--gris-claro); }
/* ── GRID-2: bloque vertical texto + caja ───────────────────────── */
.grid-2 > * + * { margin-top: 2rem; }
/* ── SPLIT THREE-COL TEXT ────────────────────────────────────────── */
.split-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
@media (max-width: 900px) { .split-grid { grid-template-columns: 1fr; gap: 2rem; } }
.split-text-block { padding: 2rem; background: rgba(255,255,255,0.03); border-radius: 8px; border: 1px solid rgba(201,168,76,0.1); }
.split-num { font-size: 3.5rem; font-weight: 900; color: rgba(226,194,122,0.28); line-height: 1; display: block; margin-bottom: 0.5rem; font-family: var(--font-display); }
.split-title { font-size: 1.1rem; color: var(--dorado); margin-bottom: 0.8rem; }
.split-body { font-size: 0.9rem; color: var(--gris-claro); }
.split-quote { border-left: 2px solid var(--dorado); padding: 0.8rem 1.2rem; margin-top: 1.2rem; font-style: italic; color: var(--gris-claro); font-size: 0.9rem; }
.split-quote cite { display: block; margin-top: 0.4rem; font-size: 0.78rem; color: var(--dorado); font-style: normal; font-weight: 700; }
/* ── PRODUCT CARD ALIASES ────────────────────────────────────────── */
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.8rem; margin-top: 3rem; }
.product-card { background: var(--negro-card); border-radius: var(--radio); overflow: hidden; border: 1px solid rgba(201,168,76,0.1); transition: var(--transicion); display: flex; flex-direction: column; position: relative; }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0,0,0,0.6); border-color: rgba(201,168,76,0.32); }
.product-badge { position: absolute; top: 1rem; left: 1rem; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.28rem 0.75rem; border-radius: 3px; z-index: 1; }
.badge-bloque { background: #5a8a2a; color: #fff; }
.badge-black { background: #222; color: #fff; border: 1px solid #555; }
.badge-gold { background: var(--dorado); color: var(--negro); }
.badge-silver { background: #C0C0C0; color: #111; }
.product-img-wrap { height: 220px; overflow: hidden; background: var(--negro-mid); }
.product-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.product-card:hover .product-img-wrap img { transform: scale(1.04); }
.product-card-body { padding: 1.8rem; flex: 1; display: flex; flex-direction: column; }
.product-card-title { font-size: 1.1rem; color: var(--blanco); margin-bottom: 0.8rem; }
.product-card-text { font-size: 0.88rem; color: var(--gris-claro); flex: 1; margin-bottom: 1.5rem; }
.product-card-body .btn { justify-content: center; }
/* ── CARDS 100% CLICKABLES ─────────────────────────────────────────
Patrón: la card contiene un único enlace (el "ver/leer/descubrir/...") y queremos
que un click en cualquier parte de la card lleve a la misma URL del enlace.
Lo hacemos con un ::after transparente sobre el que cubre toda la card via
position:absolute. Sin JS. Solo aplica a cards con UN único . */
.product-card .btn-gold-outline::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
}
.clasif-card { position: relative; }
.clasif-card .btn-gold-outline::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
}
/* ── BLOG CARD SUPPLEMENT ────────────────────────────────────────── */
.blog-meta { display: flex; gap: 0.8rem; align-items: center; margin-bottom: 0.8rem; }
.blog-cat { font-size: 0.62rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; background: var(--dorado); color: var(--negro); padding: 0.2rem 0.6rem; border-radius: 3px; }
.blog-date { font-size: 0.75rem; color: var(--gris); }
.blog-card-title { font-size: 1.05rem; margin-bottom: 0.8rem; color: var(--blanco); }
.blog-card-excerpt { font-size: 0.88rem; color: var(--gris-claro); flex: 1; margin-bottom: 1.2rem; }
.blog-read-more { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dorado); transition: var(--transicion); }
.blog-read-more:hover { gap: 0.8rem; }
/* ── FAQ ALIASES ─────────────────────────────────────────────────── */
.faq-question { width: 100%; background: none; border: none; padding: 1.3rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; font-family: var(--font-principal); font-size: 0.98rem; font-weight: 600; color: var(--blanco); text-align: left; transition: var(--transicion); }
.faq-question:hover { color: var(--dorado); }
.faq-icon { color: var(--dorado); font-size: 1.4rem; line-height: 1; flex-shrink: 0; transition: var(--transicion); font-weight: 300; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-answer p { padding: 0 0 1.5rem; font-size: 0.94rem; color: var(--gris-claro); }
.faq-answer a { color: var(--dorado); text-decoration: underline; }
.section-dark .faq-item { border-bottom: 1px solid rgba(255,255,255,0.08); }
/* ── CLASSIFICATION CARD ALIASES ─────────────────────────────────── */
.clasif-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.5rem; margin-top: 3rem; align-items: stretch; }
.clasif-card { border-radius: var(--radio); padding: 2.2rem 1.8rem; border: 1px solid; transition: var(--transicion); position: relative; overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.clasif-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.clasif-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-card); }
.clasif-card.black-tier { background: #0d0d0d; border-color: #3a3a3a; }
.clasif-card.black-tier::before { background: #666; }
.clasif-card.silver-tier { background: #141418; border-color: #7a7a8a; }
.clasif-card.silver-tier::before { background: #C0C0C0; }
.clasif-card.gold-tier { background: #0d0b00; border-color: var(--dorado); }
.clasif-card.gold-tier::before { background: var(--dorado); }
.clasif-label { font-size: 0.62rem; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.8rem; }
.clasif-card.black-tier .clasif-label { color: #888; }
.clasif-card.silver-tier .clasif-label { color: #C0C0C0; }
.clasif-card.gold-tier .clasif-label { color: var(--dorado); }
.clasif-name { font-size: 1.15rem; margin-bottom: 0.6rem; color: var(--blanco); }
.clasif-desc { font-size: 0.88rem; color: var(--gris-claro); margin-bottom: 1.5rem; flex: 1; }
.clasif-card .btn { margin-top: auto; display: block; width: fit-content; max-width: 100%; white-space: normal; text-align: center; }
.clasif-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* ── CTA BIFURCADO SECTION ───────────────────────────────────────── */
.cta-bifurcado { background: var(--negro-card); }
.cta-split { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0; min-height: 360px; align-items: stretch; }
@media (max-width: 900px) { .cta-split { grid-template-columns: 1fr; } }
.cta-hostelero, .cta-distribuidor { padding: 4rem 3rem; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.cta-hostelero { background: var(--negro-card); border: 1px solid rgba(201, 168, 76, 0.18); }
.cta-distribuidor { background: var(--negro-mid); }
.cta-divider { background: rgba(201,168,76,0.15); height: 100%; width: 1px; }
@media (max-width: 900px) { .cta-divider { display: none; } }
.cta-eyebrow { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dorado); margin-bottom: 0.8rem; }
.cta-title { font-size: clamp(1.2rem, 2.5vw, 1.8rem); font-weight: 700; margin-bottom: 1rem; color: var(--blanco); }
.cta-body { font-size: 0.92rem; color: var(--gris-claro); max-width: 400px; margin: 0 auto 1.8rem; }
.cta-simple { text-align: center; background: var(--negro-mid); padding: 6rem 2.5rem; }
/* ── FOOTER ALIASES ──────────────────────────────────────────────── */
.footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr !important; }
.footer-brand { text-align: center; }
.footer-brand img { max-height: 200px; height: auto; width: auto; max-width: 100%; margin: 0 auto 1rem; display: block; }
.footer-tagline { font-size: 0.88rem; color: var(--gris); line-height: 1.75; margin-bottom: 1rem; }
.footer-cert { display: inline-flex; flex-direction: column; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--gris); margin-top: 0.5rem; text-align: center; }
.footer-cert .cert-badge { width: auto; height: auto; border-radius: 4px; padding: 0.25rem 0.6rem; font-size: 0.62rem; }
.footer-nav h4, .footer-heading { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dorado); margin-bottom: 1.2rem; }
.footer-nav ul li { margin-bottom: 0.65rem; }
.footer-nav ul li a { font-size: 0.88rem; color: var(--gris); transition: var(--transicion); }
.footer-nav ul li a:hover { color: var(--blanco); }
.footer-contact-col p { font-size: 0.88rem; color: var(--gris); margin-bottom: 0.8rem; }
.footer-whatsapp { display: inline-flex; align-items: center; gap: 0.6rem; color: #25D366; font-size: 0.88rem; font-weight: 700; transition: var(--transicion); }
.footer-whatsapp:hover { color: #1ebe5b; }
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { color: var(--dorado); font-size: 0.78rem; }
.footer-agency { font-size: 0.78rem; color: var(--gris); }
.footer-agency a { color: var(--dorado); }
/* ── PAGE HEADER SIMPLE (contact, blog…) ─────────────────────────── */
.page-header-simple { padding: 8rem 2.5rem 3rem; background: var(--negro-mid); border-bottom: 1px solid rgba(201,168,76,0.12); }
.page-header-title { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; margin-top: 1rem; margin-bottom: 0.8rem; }
.page-header-sub { font-size: 1rem; color: var(--gris-claro); max-width: 560px; }
/* ── PAGE HERO ALIASES ───────────────────────────────────────────── */
.page-hero { background-size: cover; background-position: center; }
.page-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(3,1,2,0.35) 0%, rgba(3,1,2,0.45) 50%, var(--negro) 100%); }
.page-hero-title { color: var(--blanco); font-size: clamp(1.8rem, 4vw, 3rem); margin-bottom: 0.8rem; margin-top: 0.8rem; }
.page-hero-title em { font-style: italic; color: var(--dorado); font-family: var(--font-display); text-shadow: 0 1px 8px rgba(0,0,0,0.8), 0 0 20px rgba(0,0,0,0.6); }
.page-hero-subtitle { color: rgba(255,255,255,0.85); font-size: 1rem; max-width: 600px; }
/* ── SPLIT 50/50 ─────────────────────────────────────────────────── */
.split-50 { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.split-50-reverse { direction: rtl; }
.split-50-reverse > * { direction: ltr; }
@media (max-width: 900px) { .split-50, .split-50-reverse { grid-template-columns: 1fr; direction: ltr; gap: 2.5rem; } }
.split-50-text p { color: var(--gris-claro); margin-bottom: 1rem; }
.split-50-media img { border-radius: 8px; width: 100%; object-fit: cover; max-height: 420px; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.split-50-media img:hover { transform: scale(1.01); box-shadow: 0 18px 40px rgba(0,0,0,0.45); }
/* ── IMAGE LIGHTBOX ──────────────────────────────────────────────── */
.img-lightbox {
position: fixed; inset: 0; z-index: 10000;
background: rgba(0,0,0,0.92);
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none;
transition: opacity 0.3s ease;
cursor: pointer;
padding: 4rem 2rem;
}
.img-lightbox.is-open { opacity: 1; pointer-events: all; }
.img-lightbox img {
max-width: 95%; max-height: 90vh; width: auto; height: auto;
border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,0.6);
transform: scale(0.92); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.img-lightbox.is-open img { transform: scale(1); }
.img-lightbox-close {
position: absolute; top: 1.5rem; right: 1.5rem;
width: 44px; height: 44px; border-radius: 50%;
background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.2s ease, transform 0.2s ease;
}
.img-lightbox-close:hover { background: rgba(255,255,255,0.2); transform: rotate(90deg); }
.split-50-media .clasif-preview-grid { grid-template-columns: 1fr 1fr; }
/* ── STEPS GRID ──────────────────────────────────────────────────── */
/* Timeline horizontal con 6 hitos: en desktop SIEMPRE 6 columnas inline
(timeline tradicional) con línea decorativa conectándolas. En tablet
se reagrupa a 3+3 y en mobile a 2+2+2 (también pasa por carrusel
.is-swipe-mobile si se aplica). Sincronizado 14-05-2026 con styles.css
local — antes el tema tenia auto-fit minmax(180px) que producia
wraps no deseados (5+1 en viewports estrechos). */
/* TIMELINE NOSOTROS — namespace propio .timeline-* para no colisionar con
Elementor (que define .step-num 38x38 globalmente) ni con .steps-grid de
Distribuidores. Renombrado 14-05-2026. */
.timeline-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.2rem; position: relative; }
.timeline-grid::before { content: ''; position: absolute; top: 32px; left: 6%; right: 6%; height: 1px; background: linear-gradient(to right, transparent, rgba(201,168,76,0.4) 10%, rgba(201,168,76,0.4) 90%, transparent); z-index: 0; pointer-events: none; }
.timeline-item { text-align: center; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.timeline-num { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; font-size: 1rem; font-weight: 900; color: var(--dorado); font-family: var(--font-display); background: var(--negro-mid); border: 1.5px solid rgba(201,168,76,0.5); border-radius: 50%; margin-bottom: 1rem; box-shadow: 0 0 0 6px var(--negro); position: relative; z-index: 2; flex-shrink: 0; }
.timeline-step-title { font-size: 0.85rem; font-weight: 700; color: var(--blanco); margin-bottom: 0.4rem; line-height: 1.3; }
.timeline-body { font-size: 0.76rem; color: var(--gris-claro); line-height: 1.5; }
@media (max-width: 900px) {
.timeline-grid { grid-template-columns: repeat(3, 1fr); }
.timeline-grid::before { display: none; }
}
@media (max-width: 540px) {
.timeline-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ── TEAM GRID ALIASES ───────────────────────────────────────────── */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; margin-top: 3rem; }
/* En tablet (641-900) las 3 cards de equipo rompen a 2+1 (tarjeta huerfana
centrada). Forzar 1 columna centrada con max-width preserva el ritmo
visual y la jerarquia premium. Desktop (>=901) intocado: 3 columnas. */
@media (max-width: 900px) and (min-width: 641px) {
.team-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}
.team-card { background: var(--negro-mid); border-radius: var(--radio); overflow: hidden; border: 1px solid rgba(201,168,76,0.1); text-align: center; transition: var(--transicion); }
.team-card:hover { border-color: rgba(201,168,76,0.35); transform: translateY(-4px); }
.team-photo-placeholder { height: 220px; background: var(--negro-card); overflow: hidden; }
.team-avatar { height: 220px; background: linear-gradient(135deg, rgba(201,168,76,0.04) 0%, rgba(201,168,76,0.13) 100%); border-bottom: 1px solid rgba(201,168,76,0.18); display: flex; align-items: center; justify-content: center; }
.team-avatar-initials { font-family: var(--font-display); font-size: 4.5rem; font-weight: 500; font-style: italic; color: var(--dorado); letter-spacing: 0.06em; line-height: 1; }
.team-name { font-size: 1.15rem; color: var(--blanco); padding: 1.5rem 1.5rem 0.3rem; }
.team-role { font-size: 0.75rem; color: var(--dorado); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0 1.5rem 0.8rem; display: block; }
.team-bio { font-size: 0.88rem; color: var(--gris-claro); padding: 0 1.5rem 1.8rem; }
.team-note { color: var(--gris); font-size: 0.85rem; }
.team-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.team-card-mini { background: var(--negro-mid); border-radius: var(--radio); overflow: hidden; border: 1px solid rgba(201,168,76,0.1); text-align: center; }
.team-card-mini h4 { font-size: 1rem; color: var(--blanco); padding: 1rem 1rem 0.3rem; }
.team-card-mini p { font-size: 0.78rem; color: var(--gris-claro); padding: 0 1rem 1.2rem; }
.team-photo-sm { height: 160px; background: var(--negro-card); }
/* ── ARGUMENT BLOCKS (Por qué Discarpe) ─────────────────────────── */
.arg-num { display: block; font-size: 5rem; font-weight: 900; color: rgba(201,168,76,0.22); line-height: 1; margin-bottom: 0.5rem; font-family: var(--font-display); }
/* Tonalidades por número: dorado-oscuro en fondos oscuros, dorado-claro en fondos claros */
.section-dark .arg-num { color: rgba(226,194,122,0.28); } /* --dorado-claro sobre negro */
.section:not(.section-dark) .arg-num { color: rgba(168,134,48,0.32); } /* --dorado-oscuro sobre blanco */
.arg-list { list-style: none; margin: 1.2rem 0; }
.arg-list li { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.92rem; color: var(--gris-claro); }
.arg-list li::before { content: '✓'; color: var(--dorado); flex-shrink: 0; margin-top: 1px; }
.arg-list li:last-child { border-bottom: none; }
.arg-stat { display: flex; align-items: baseline; gap: 0.8rem; margin-top: 2rem; padding: 1.2rem 1.5rem; background: rgba(201,168,76,0.05); border-left: 3px solid var(--dorado); border-radius: 0 6px 6px 0; }
.stat-num { font-size: 2.5rem; font-weight: 900; color: var(--dorado); line-height: 1; font-family: var(--font-display); }
.stat-label { font-size: 0.88rem; color: var(--gris-claro); }
/* ── GRIS TEXTO ALIAS ────────────────────────────────────────────── */
.gris-texto, .color-gris { color: var(--gris-claro); }
/* ── RESPONSIVE SUPPLEMENT ───────────────────────────────────────── */
@media (max-width: 1100px) {
.section { padding: 5rem 2rem; }
.split-50 { gap: 3rem; }
.footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 900px) {
.section { padding: 4.5rem 0; }
.container { padding-left: 1.5rem; padding-right: 1.5rem; }
.split-50, .split-50-reverse { direction: ltr; }
.cta-split { grid-template-columns: 1fr; }
.clasif-preview-grid { grid-template-columns: 1fr; }
.team-split-grid { grid-template-columns: 1fr; }
.arg-num { font-size: 3.5rem; }
}
@media (max-width: 640px) {
.section { padding: 3.5rem 0; }
/* Gutter lateral aumentado a 1.5rem en movil estrecho. Resuelve el
"chocan con margin" reportado en cards de article-grid (blog/index)
y demas grids 100%-ancho a 360-480 px. Desktop intocado. */
.container { padding-left: 1.5rem; padding-right: 1.5rem; }
.timeline-grid { grid-template-columns: repeat(2, 1fr); }
.split-grid { grid-template-columns: 1fr; }
/* Footer en mobile reorganizado: brand → contacto → nav1 | nav2 */
.footer-grid {
grid-template-columns: 1fr 1fr !important;
grid-template-areas:
"brand brand"
"contact contact"
"nav1 nav2" !important;
gap: 2rem 1rem !important;
}
.footer-grid > :nth-child(1) { grid-area: brand; text-align: center; }
.footer-grid > :nth-child(2) { grid-area: nav1; }
.footer-grid > :nth-child(3) { grid-area: nav2; }
/* Contacto comercial ocupa span de 2 cols (sola en su fila): centrada
horizontalmente con max-width para que el botón CTA no se estire. */
.footer-grid > :nth-child(4) {
grid-area: contact;
text-align: center;
max-width: 380px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.page-header-simple { padding: 6rem 1.5rem 2.5rem; }
.nav-inner { padding: 0 1.2rem; }
.trust-bar-grid { gap: 1.2rem; }
}
/* ── Bloque CTA bifurcado + botones — responsive ───────────────────── */
@media (max-width: 900px) {
.cta-hostelero,
.cta-distribuidor { padding: 3rem 1.5rem !important; }
}
@media (max-width: 640px) {
.cta-hostelero,
.cta-distribuidor { padding: 2.5rem 1.2rem !important; }
/* Botones largos se wrappean en mobile en lugar de desbordar */
.btn {
white-space: normal !important;
text-align: center;
max-width: 100%;
word-wrap: break-word;
line-height: 1.3;
}
}
/* Compensar la admin bar de WordPress cuando un usuario logueado navega el sitio.
`!important` necesario porque .nav ahora tiene `top: 0 !important` defensivo. */
body.admin-bar .nav { top: 32px !important; }
@media screen and (max-width: 782px) {
body.admin-bar .nav { top: 46px !important; }
}
/* ── FOOTER — Banda "Distribuimos en" ──────────────────────────────
Destacada entre el footer-grid y el footer-bottom. Separadores dorados
sutiles arriba y abajo. Mobile: 2 columnas de ciudades. */
.footer-distribucion {
margin-top: 3rem;
padding: 1.4rem 0;
border-top: 1px solid rgba(201,168,76,0.14);
border-bottom: 1px solid rgba(201,168,76,0.14);
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
text-align: center;
}
.footer-distribucion-label {
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--dorado);
}
.footer-distribucion-list {
display: flex;
gap: 1.8rem;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.footer-distribucion-list span {
font-size: 0.88rem;
color: var(--gris-claro);
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.footer-distribucion-list span::before {
content: '▸';
color: var(--dorado);
font-size: 0.78rem;
opacity: 0.7;
}
@media (max-width: 640px) {
.footer-distribucion {
flex-direction: column;
gap: 0.7rem;
padding: 1.2rem 1rem;
}
/* Mobile: ciudades en línea inline con separadores · elegantes entre ellas,
sin chevrones. Wrap natural si no caben. */
.footer-distribucion-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0;
row-gap: 0.3rem;
}
.footer-distribucion-list span {
gap: 0;
padding: 0 0.15rem;
}
.footer-distribucion-list span::before { content: ''; }
.footer-distribucion-list span:not(:first-child)::before {
content: '·';
color: var(--dorado);
opacity: 0.55;
font-size: 1rem;
margin-right: 0.7rem;
margin-left: 0.1rem;
}
}
/* Ocultar el botón flotante del plugin "Click to Chat" de Linkasoft.
Cuando el tema Discarpe está activo, usamos nuestro propio botón WhatsApp
(template-parts/whatsapp-float.php) que es visualmente coherente con la marca.
Estas reglas solo aplican cuando nuestro CSS se carga → al volver al tema
Astra, el plugin recupera su visibilidad automáticamente. */
.ht-ctc,
.ht-ctc-btn,
.ht-ctc-chat-box,
.ht-ctc-chat,
div[id^="ht-ctc"],
div[class*="ht-ctc"],
div[class*="click-to-chat"],
.whatsapp-clicktochat {
display: none !important;
}
/* ===============================================================
RESPONSIVE MOBILE — afinado sin tocar desktop
=============================================================== */
/* Nav y logo más compactos en móvil pequeño */
@media (max-width: 640px) {
.nav { padding: 0 1rem; }
.nav-logo img { max-height: 42px; }
}
/* ====================================================================
SWIPE CAROUSEL PATTERN (mobile/tablet only) — mismo bloque que styles.css
==================================================================== */
@media (max-width: 780px) {
.is-swipe-mobile {
display: flex !important;
flex-wrap: nowrap !important;
grid-template-columns: none !important;
/* justify-content: flex-start !important — CAUSA RAIZ del bug
"carousel carga en slide intermedio". Si un grid origen tiene
`justify-content: center` (caso .razas-mini-grid), al hacer flex
con items que exceden el viewport el browser centra el contenido
y los primeros items quedan con offsetLeft NEGATIVO, fuera del
area scrolleable. */
justify-content: flex-start !important;
/* align-items: flex-start — evita que al expandir un
en un slide, las cards hermanas closed se estiren a la misma altura
por el `align-items: stretch` (default flex). */
align-items: flex-start !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: 1.5rem;
gap: 1rem !important;
/* padding-top 0.5rem: deja respirar el borde superior de las cards.
padding/margin-inline 1.5rem: coincide con .container en <=900. */
padding: 0.5rem 1.5rem 0.5rem;
margin-inline: -1.5rem;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* Defensivos contra scroll anchoring del browser en otros escenarios. */
overflow-anchor: none;
}
.is-swipe-mobile::-webkit-scrollbar { display: none; }
.is-swipe-mobile > * {
flex: 0 0 86% !important;
max-width: 86%;
scroll-snap-align: start;
min-width: 0;
}
.swipe-wrap { position: relative; }
.swipe-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 0.55rem;
margin-top: 1.1rem;
padding: 0;
list-style: none;
}
.swipe-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(201, 168, 76, 0.28);
border: none;
cursor: pointer;
padding: 0;
transition: width 0.3s ease, background 0.3s ease;
}
.swipe-dot:hover { background: rgba(201, 168, 76, 0.55); }
.swipe-dot.is-active {
background: var(--dorado);
width: 26px;
border-radius: 4px;
}
}
@media (min-width: 781px) {
.swipe-dots { display: none !important; }
}
/* ====================================================================
FOOTER LAYOUT (todas las resoluciones — sin accordion)
Decisión 14-05-2026: NO usar accordion en mobile/tablet. Cada nav es