/*
Theme Name: Vieco
Description: Tema hijo de Kadence para vieco.com.mx (B2B, desechables de fibra de agave).
Author: Vieco
Template: kadence
Version: 2.1.0
Text Domain: vieco
*/

/* ============================================================
   SISTEMA VISUAL VIECO v2 — "materia prima editorial"
   Tokens: verde agave #14532D · tinta #1A1D1B · crema #FAF7F2 · arena #EAE3D6
   Motion: 150–250ms ease-out, solo funcional + un fade-up por sección (una vez)
   ============================================================ */
:root {
	--vieco-radius: 6px;
	--vieco-transition: 180ms cubic-bezier(0.25, 1, 0.5, 1);
	--vieco-verde: var(--global-palette1);
	--vieco-tinta: var(--global-palette3);
	--vieco-crema: var(--global-palette7);
	--vieco-arena: var(--global-palette8);
}

/* --- Utilidades de marca --- */
.vieco-oculto { display: none !important; }

/* --- Tipografía: escala display --- */
h1, .vieco-h1 {
	font-size: clamp(2.5rem, 5vw, 4.25rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.05;
	text-wrap: balance;
}
h2 {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	letter-spacing: -0.005em;
	line-height: 1.15;
	text-wrap: balance;
}
.entry-content p, .vieco-seccion p { max-width: 65ch; }
.vieco-eyebrow {
	display: block;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--vieco-verde);
	margin-bottom: 0.75rem;
}

/* --- Ritmo de sección --- */
/* Padding lateral en la propia seccion: el fondo (bandas verde/crema) pinta a sangre completa
   porque el background llena la caja de padding; el contenido queda con >=20px de aire en cualquier ancho.
   !important para ganar a content.min.css de Kadence (alignfull). Uniforme para home y paginas de bloques. */
.vieco-seccion { padding-block: clamp(56px, 9vw, 128px); padding-left: clamp(1.25rem, 5vw, 2rem) !important; padding-right: clamp(1.25rem, 5vw, 2rem) !important; }
.vieco-seccion-alterna { background: var(--vieco-crema); }

/* --- Botones --- */
button, .button, .wp-block-button__link, .kb-button,
input[type="submit"], .single_add_to_cart_button {
	border-radius: var(--vieco-radius);
	transition: background-color var(--vieco-transition),
		border-color var(--vieco-transition),
		color var(--vieco-transition),
		box-shadow var(--vieco-transition);
}
a { transition: color var(--vieco-transition); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--vieco-verde);
	outline-offset: 2px;
}
/* secundario outline (paginas interiores, fondo claro) */
.vieco-btn-outline .wp-block-button__link, a.vieco-btn-outline {
	background: transparent; border: 1.5px solid var(--vieco-verde); color: var(--vieco-verde);
}
.vieco-btn-outline .wp-block-button__link:hover, a.vieco-btn-outline:hover {
	background: var(--vieco-verde); color: var(--global-palette9);
}
/* ghost blanco (sobre foto) */
.vieco-btn-ghost .wp-block-button__link {
	background: transparent; border: 1.5px solid #fff; color: #fff;
}
.vieco-btn-ghost .wp-block-button__link:hover { background: rgba(255,255,255,0.1); color: #fff; }
/* ghost crema (sobre banda verde) */
.vieco-btn-ghost-crema .wp-block-button__link {
	background: transparent; border: 1.5px solid var(--vieco-crema); color: var(--vieco-crema);
}
.vieco-btn-ghost-crema .wp-block-button__link:hover { background: rgba(250,247,242,0.12); color: var(--vieco-crema); }
/* primario de ficha de producto */
a.vieco-btn-distribuidor.vieco-btn-primario {
	display: inline-block; padding: .75rem 1.6rem;
	background: var(--vieco-verde); color: var(--global-palette9);
	border: 1.5px solid var(--vieco-verde);
	border-radius: var(--vieco-radius); text-decoration: none; font-weight: 600;
}
a.vieco-btn-distribuidor.vieco-btn-primario:hover {
	background: var(--global-palette2); border-color: var(--global-palette2); color: var(--global-palette9);
}

/* --- Header / footer --- */
#masthead .kadence-sticky-header.item-is-fixed,
#masthead .site-main-header-wrap { border-bottom: 1px solid var(--global-palette6); }
.site-branding img.custom-logo { max-height: 52px; width: auto; }
@media (max-width: 767px) { .site-branding img.custom-logo { max-height: 44px; } }
.site-footer { background: var(--vieco-arena); }
.site-footer .footer-html { color: var(--global-palette5); }

/* --- Enlaces con flecha (desplazamiento 4px) --- */
.vieco-link-flecha { text-decoration: none; font-weight: 600; color: var(--vieco-verde); }
.vieco-link-flecha .flecha { display: inline-block; transition: transform var(--vieco-transition); }
.vieco-link-flecha:hover .flecha { transform: translateX(4px); }

/* ============================================================
   HOME v2
   ============================================================ */
/* 1. HERO: scrim direccional, 85vh */
.vieco-hero-v2 { position: relative; min-height: 85vh; display: flex; align-items: center; overflow: hidden; }
.vieco-hero-v2 .vieco-hero-img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%; z-index: 0;
}
.vieco-hero-v2::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(90deg, rgba(12,16,13,0.78) 0%, rgba(12,16,13,0.45) 55%, rgba(12,16,13,0.06) 85%);
}
.vieco-hero-contenido { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; padding: 6rem clamp(1.25rem, 5vw, 2rem); box-sizing: border-box; }
.vieco-hero-contenido h1 { color: #fff; max-width: 17ch; margin: 0 0 1.25rem; }
.vieco-hero-contenido .vieco-hero-sub { color: #F4F1EA; font-size: 1.125rem; line-height: 1.6; max-width: 55ch; margin: 0 0 2rem; }
@media (max-width: 767px) {
	.vieco-hero-v2 { min-height: 78vh; }
	.vieco-hero-v2::after { background: linear-gradient(180deg, rgba(12,16,13,0.72) 0%, rgba(12,16,13,0.45) 70%, rgba(12,16,13,0.25) 100%); }
}

/* 2/6. BANDAS verdes (certificaciones y teaser) */
.vieco-banda { background: var(--vieco-verde); color: var(--vieco-crema); }
.vieco-banda h2 { color: var(--vieco-crema); }
.vieco-banda .vieco-eyebrow { color: #A7C4AE; }
.vieco-banda p { color: var(--vieco-crema); }
.vieco-certs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; max-width: 1200px; margin: 0 auto; }
.vieco-cert { display: flex; gap: .9rem; align-items: flex-start; }
.vieco-cert svg { flex: 0 0 auto; width: 28px; height: 28px; stroke: var(--vieco-crema); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.vieco-cert strong { display: block; font-size: 15px; font-weight: 600; color: var(--vieco-crema); }
.vieco-cert span { display: block; font-size: 13px; color: var(--vieco-crema); opacity: .7; line-height: 1.45; margin-top: .15rem; }
@media (max-width: 900px) {
	.vieco-certs { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
	.vieco-cert { padding-bottom: 1.25rem; border-bottom: 1px solid rgba(250,247,242,0.15); }
	.vieco-cert:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
}

/* 3. POR QUÉ: numerales fantasma */
.vieco-porque { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; max-width: 1200px; margin: 0 auto; }
.vieco-porque-item { position: relative; padding-top: 2.75rem; }
.vieco-porque-item .vieco-num {
	position: absolute; top: 0; left: 0; z-index: 0;
	font-size: 64px; font-weight: 700; line-height: 1; color: var(--vieco-arena);
	user-select: none;
}
.vieco-porque-item h3 { position: relative; z-index: 1; font-size: 1.25rem; margin: 0 0 .6rem; }
.vieco-porque-item p { position: relative; z-index: 1; color: var(--global-palette5); margin: 0; }
@media (max-width: 900px) { .vieco-porque { grid-template-columns: 1fr; gap: 2.25rem; } }

/* 4. QUIÉNES SOMOS: 2 columnas texto + foto 4:5 */
.vieco-somos { display: grid; grid-template-columns: 1.1fr .9fr; gap: 4rem; align-items: center; max-width: 1200px; margin: 0 auto; }
.vieco-somos-foto { aspect-ratio: 4 / 5; border-radius: var(--vieco-radius); overflow: hidden; }
.vieco-somos-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .vieco-somos { grid-template-columns: 1fr; gap: 2rem; } .vieco-somos-foto { max-width: 480px; } }

/* 5. CATÁLOGO: tarjetas de foto 4:3 */
.vieco-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; max-width: 1200px; margin: 0 auto; }
.vieco-cat-v2 .vieco-cat-foto { aspect-ratio: 4 / 3; border-radius: var(--vieco-radius); overflow: hidden; border: 1px solid var(--global-palette6); }
.vieco-cat-v2 .vieco-cat-foto img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 200ms cubic-bezier(0.25, 1, 0.5, 1);
}
.vieco-cat-v2:hover .vieco-cat-foto img { transform: scale(1.02); }
.vieco-cat-v2 h3 { font-size: 1.35rem; margin: 1.25rem 0 .5rem; }
.vieco-cat-v2 p { color: var(--global-palette5); margin: 0 0 .75rem; }
@media (max-width: 767px) { .vieco-cats { grid-template-columns: 1fr; gap: 2rem; } }

/* 7. CIERRE centrado */
.vieco-cierre { text-align: center; }
.vieco-cierre p { margin-left: auto; margin-right: auto; }
.vieco-cierre .wp-block-buttons { justify-content: center; }
.vieco-contacto-linea { color: var(--global-palette5); font-size: .98rem; }

/* --- Aparición fade-up (una vez, solo con JS y sin reduced-motion) --- */
html.vieco-anim .vieco-reveal { opacity: 0; transform: translateY(16px); }
html.vieco-anim .vieco-reveal.vieco-visible {
	opacity: 1; transform: none;
	transition: opacity 250ms cubic-bezier(0.25, 1, 0.5, 1), transform 250ms cubic-bezier(0.25, 1, 0.5, 1);
	transition-delay: var(--vieco-stagger, 0ms);
}

/* ============================================================
   Secciones interiores (nosotros / contacto / fichas)
   ============================================================ */
.vieco-sellos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
@media (max-width: 767px) { .vieco-sellos { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
.vieco-sello strong { display: block; color: var(--vieco-tinta); margin-bottom: .25rem; }
.vieco-sello p { margin: 0; color: var(--global-palette5); font-size: .95rem; }
.vieco-pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 1.5rem; }
@media (max-width: 1024px) { .vieco-pasos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .vieco-pasos { grid-template-columns: 1fr; } }
.vieco-paso-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.25rem; height: 2.25rem; border-radius: 50%;
	background: var(--vieco-verde); color: #fff; font-weight: 600; margin-bottom: .75rem;
}
.vieco-paso strong { display: block; color: var(--vieco-tinta); margin-bottom: .35rem; }
.vieco-paso p { margin: 0; color: var(--global-palette5); font-size: .95rem; }
.vieco-equipo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1.5rem; }
@media (max-width: 767px) { .vieco-equipo { grid-template-columns: 1fr; } }
.vieco-persona { border: 1px solid var(--global-palette6); border-radius: var(--vieco-radius); padding: 1.5rem; background: var(--global-palette9); }
.vieco-persona strong { display: block; font-size: 1.05rem; color: var(--vieco-tinta); }
.vieco-persona .vieco-cargo { display: block; color: var(--vieco-verde); font-weight: 500; margin-top: .2rem; }
.vieco-persona .vieco-adscripcion { display: block; color: var(--global-palette5); font-size: .92rem; margin-top: .2rem; }
.vieco-datos-directos { background: var(--vieco-crema); border-radius: var(--vieco-radius); padding: 1.75rem; }
.vieco-microcopy { color: var(--global-palette5); font-size: .9rem; }

/* --- Ficha de producto --- */
.vieco-precio-pieza { color: var(--global-palette5); font-size: 1rem; margin: .25rem 0 1rem; }
.vieco-precio-pieza .woocommerce-Price-amount { color: var(--vieco-tinta); font-weight: 600; }
a.vieco-btn-distribuidor { display: inline-block; padding: .65rem 1.4rem; border-radius: var(--vieco-radius); text-decoration: none; font-weight: 500; }
.vieco-ficha-tecnica { margin-top: 2rem; }
.vieco-ficha-tecnica h2 { font-size: 1.15rem; margin-bottom: .75rem; }
.vieco-ficha-tecnica table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.vieco-ficha-tecnica th { text-align: left; color: var(--global-palette5); font-weight: 500; padding: .55rem .75rem .55rem 0; width: 42%; vertical-align: top; }
.vieco-ficha-tecnica td { color: var(--vieco-tinta); padding: .55rem 0; }
.vieco-ficha-tecnica tr + tr th, .vieco-ficha-tecnica tr + tr td { border-top: 1px solid var(--global-palette6); }
.vieco-seccion-sellos { margin: 3rem 0 1rem; padding: 2rem 0; border-top: 1px solid var(--global-palette6); }
.vieco-loop-unidades { color: var(--global-palette5); font-size: .88rem; margin: .15rem 0 .35rem; }

/* --- Accesibilidad: reduced motion mata todo --- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
	html.vieco-anim .vieco-reveal { opacity: 1 !important; transform: none !important; }
}


/* ============================================================
   SISTEMA INTERIOR v2 (nosotros/contacto/crowdfunding/ficha)
   Sobrescribe estilos de Fase 3. Mismo sistema que la home.
   ============================================================ */

/* Intro 2 columnas (nosotros): texto + foto macro 4:5 */
.vieco-intro2 { display: grid; grid-template-columns: 1.05fr .95fr; gap: 4rem; align-items: center; max-width: 1200px; margin: 0 auto; }
.vieco-intro2 .vieco-intro-foto { aspect-ratio: 4 / 5; border-radius: var(--vieco-radius); overflow: hidden; border: 1px solid var(--global-palette6); }
.vieco-intro2 .vieco-intro-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .vieco-intro2 { grid-template-columns: 1fr; gap: 2rem; } .vieco-intro2 .vieco-intro-foto { max-width: 460px; } }

/* Pasos con numerales fantasma (coherente con la home) */
.vieco-pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; max-width: 1200px; margin: 2.5rem auto 0; }
@media (max-width: 900px) { .vieco-pasos { grid-template-columns: repeat(2, 1fr); gap: 2.25rem; } }
@media (max-width: 560px) { .vieco-pasos { grid-template-columns: 1fr; } }
.vieco-paso { position: relative; padding-top: 2.75rem; }
.vieco-paso .vieco-paso-num { position: absolute; top: 0; left: 0; z-index: 0; display: block; width: auto; height: auto; background: none; border-radius: 0; margin: 0; font-size: 64px; font-weight: 700; line-height: 1; color: var(--vieco-arena); user-select: none; }
.vieco-paso strong { position: relative; z-index: 1; display: block; color: var(--vieco-tinta); margin-bottom: .4rem; }
.vieco-paso p { position: relative; z-index: 1; margin: 0; color: var(--global-palette5); font-size: .95rem; }

/* Equipo con monograma circular */
.vieco-equipo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1100px; margin: 2rem auto 0; }
@media (max-width: 767px) { .vieco-equipo { grid-template-columns: 1fr; } }
.vieco-persona { border: 1px solid var(--global-palette6); border-radius: var(--vieco-radius); padding: 1.75rem; background: var(--global-palette9); }
.vieco-monograma { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--vieco-verde); color: var(--vieco-crema); font-size: 22px; font-weight: 600; letter-spacing: .02em; margin-bottom: 1.1rem; }
.vieco-persona strong { display: block; font-size: 1.05rem; color: var(--vieco-tinta); }
.vieco-persona .vieco-cargo { display: block; color: var(--vieco-verde); font-weight: 600; font-size: 14px; margin-top: .3rem; }
.vieco-persona .vieco-adscripcion { display: block; color: var(--global-palette5); font-size: 14px; opacity: .85; margin-top: .15rem; line-height: 1.4; }

/* Contacto: 2 columnas + tarjeta de datos con iconos */
.vieco-contacto2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: start; max-width: 1100px; margin: 0 auto; }
@media (max-width: 900px) { .vieco-contacto2 { grid-template-columns: 1fr; gap: 2.5rem; } }
.vieco-datos-directos { background: var(--vieco-crema); border: 1px solid var(--global-palette6); border-radius: var(--vieco-radius); padding: 1.75rem; }
.vieco-datos-directos h2 { font-size: 1.15rem; margin: 0 0 1.1rem; }
.vieco-dato { display: flex; gap: .8rem; align-items: flex-start; padding: .75rem 0; }
.vieco-dato + .vieco-dato { border-top: 1px solid var(--global-palette6); }
.vieco-dato svg { flex: 0 0 auto; width: 22px; height: 22px; stroke: var(--vieco-verde); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.vieco-dato .vieco-dato-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--global-palette5); margin-bottom: .12rem; }
.vieco-dato a, .vieco-dato .val { color: var(--vieco-tinta); text-decoration: none; font-weight: 500; }
.vieco-dato a:hover { color: var(--vieco-verde); }

/* Formularios (Fluent Forms + MailPoet): un solo lenguaje, no "de plugin" */
.ff-el-input--label label, .mailpoet_form .mailpoet_paragraph label { font-size: 14px !important; font-weight: 600 !important; color: var(--vieco-tinta) !important; }
.ff-el-form-control,
.frm-fluent-form select, .frm-fluent-form textarea,
.mailpoet_form input.mailpoet_text, .mailpoet_form input.mailpoet_email, .mailpoet_form textarea.mailpoet_textarea {
	border: 1px solid #D8D2C4 !important; border-radius: var(--vieco-radius) !important;
	padding: .7rem .85rem !important; background: #fff !important; color: var(--vieco-tinta) !important; font-size: 16px !important;
	transition: border-color var(--vieco-transition), box-shadow var(--vieco-transition) !important;
}
.ff-el-form-control:focus,
.frm-fluent-form select:focus, .frm-fluent-form textarea:focus,
.mailpoet_form input.mailpoet_text:focus, .mailpoet_form input.mailpoet_email:focus, .mailpoet_form textarea:focus {
	border-color: var(--vieco-verde) !important; box-shadow: 0 0 0 3px rgba(20,83,45,0.12) !important; outline: none !important;
}
.ff-btn-submit, .mailpoet_form input.mailpoet_submit {
	background: var(--vieco-verde) !important; border: 1.5px solid var(--vieco-verde) !important; color: #fff !important;
	border-radius: var(--vieco-radius) !important; font-weight: 600 !important; padding: .8rem 1.7rem !important;
	transition: background-color var(--vieco-transition) !important;
}
.ff-btn-submit:hover, .mailpoet_form input.mailpoet_submit:hover { background: var(--global-palette2) !important; }
@media (max-width: 600px) { .ff-btn-submit, .mailpoet_form input.mailpoet_submit { width: 100% !important; } }
.mailpoet_form { padding: 0 !important; background: transparent !important; }
.vieco-form-wrap .vieco-microcopy { margin-top: .5rem; font-size: 13px; }

/* Ficha de producto: aire galeria/datos + tabla zebra */
@media (min-width: 769px) { .single-product div.product div.summary { padding-left: clamp(24px, 3.5vw, 48px); } }
.vieco-ficha-tecnica table { border: 1px solid var(--global-palette6); }
.vieco-ficha-tecnica tr:nth-child(even) { background: var(--vieco-crema); }
.vieco-ficha-tecnica th { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--global-palette5); font-weight: 600; padding: .62rem .9rem !important; }
.vieco-ficha-tecnica td { padding: .62rem .9rem !important; }
.vieco-ficha-tecnica tr + tr th, .vieco-ficha-tecnica tr + tr td { border-top: none; }

/* Prosa larga (aviso, blog): medida de lectura */
.vieco-prosa { max-width: 65ch; }

/* Banda de certificaciones al pie de la ficha (eco de la home, a sangre completa) */
.vieco-cert-band-producto { margin-left: calc(50% - 50vw); width: 100vw; background: var(--vieco-verde); padding: clamp(48px, 7vw, 88px) clamp(1.25rem, 5vw, 2rem); margin-top: 3.5rem; }

/* ============================================================
   PASE DE ARTESANÍA (2.0.4): viudas, menú activo, footer, hovers
   ============================================================ */
h1, h2, h3 { text-wrap: balance; }
.entry-content p, .vieco-seccion p, .vieco-hero-sub { text-wrap: pretty; }

/* Logo respira */
.site-header .site-branding, .site-branding { padding-block: 6px; }

/* Item de menú activo, claramente distinguible */
li.current-menu-item > a,
li.current_page_item > a,
li.current-menu-ancestor > a { color: var(--vieco-verde) !important; font-weight: 600; }

/* Footer: contraste + hover en enlaces */
.site-footer a { transition: color var(--vieco-transition); }
.site-footer a:hover { color: var(--vieco-verde) !important; }

/* Enlaces de texto del contenido: hover coherente (no afecta botones) */
.entry-content p a, .vieco-dato a { transition: color var(--vieco-transition); }
.entry-content p a:hover, .vieco-dato a:hover { color: var(--vieco-verde); }

/* Tarjetas de catálogo: sombra sutil solo en hover */
.vieco-cat-v2 .vieco-cat-foto { transition: box-shadow var(--vieco-transition); }
.vieco-cat-v2:hover .vieco-cat-foto { box-shadow: 0 8px 28px rgba(26,29,27,0.10); }


/* ============================================================
   SISTEMA v2.1 — dirección "io digital" (2026-07-06)
   ============================================================ */
:root { --vieco-pill: 999px; --vieco-ease: cubic-bezier(0.22,1,0.36,1); }

/* Escala display dramática */
h1, .vieco-h1 { font-size: clamp(3rem, 6.5vw, 5.25rem) !important; line-height: 1.0 !important; font-weight: 700; letter-spacing: -0.015em; }
h2 { font-size: clamp(2rem, 4vw, 3.25rem) !important; line-height: 1.05 !important; letter-spacing: -0.01em; }

/* Botones píldora con flecha */
.wp-block-button__link, a.vieco-btn-distribuidor, .ff-btn-submit, .mailpoet_form input.mailpoet_submit {
	border-radius: var(--vieco-pill) !important; padding: 14px 30px !important; font-weight: 600;
}
.wp-block-button:not(.vieco-no-arrow) > .wp-block-button__link::after { content: "\00a0\2192"; display: inline-block; transition: transform 250ms var(--vieco-ease); }
.wp-block-button:not(.vieco-no-arrow):hover > .wp-block-button__link::after { transform: translateX(5px); }
.vieco-btn-blanca .wp-block-button__link { background:#fff !important; color: var(--vieco-tinta) !important; border:0 !important; }
.vieco-btn-blanca .wp-block-button__link:hover { background: var(--vieco-crema) !important; }
.vieco-link-blanco { color:#fff !important; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; }
.vieco-link-blanco::after { content:"\00a0\2192"; display:inline-block; transition: transform 250ms var(--vieco-ease); }
.vieco-link-blanco:hover::after { transform: translateX(5px); }
.vieco-link-flecha .flecha { transition: transform 250ms var(--vieco-ease); }

/* HERO v2.1: 92vh, scrim direccional izquierda, Ken Burns */
.vieco-hero-v2 { min-height: 92vh; }
.vieco-hero-v2::after { background: linear-gradient(90deg, rgba(12,16,13,0.80) 0%, rgba(12,16,13,0.64) 34%, rgba(12,16,13,0.30) 64%, rgba(12,16,13,0.06) 100%) !important; }
@media (max-width:767px){ .vieco-hero-v2::after { background: linear-gradient(180deg, rgba(12,16,13,0.74) 0%, rgba(12,16,13,0.56) 55%, rgba(12,16,13,0.40) 100%) !important; } }
.vieco-hero-contenido h1 { max-width: 15ch; }
.vieco-hero-contenido .vieco-hero-sub { font-size: 20px; max-width: 50ch; }
.vieco-hero-v2 .vieco-hero-img { object-position: 50% 62%; }
@media (prefers-reduced-motion: no-preference) {
	html.vieco-anim .vieco-hero-img { animation: viecoKen 20s ease-out both; }
	@keyframes viecoKen { from { transform: scale(1.0); } to { transform: scale(1.05); } }
}

/* Franja de certificaciones al pie del hero (absorbe la banda verde) */
.vieco-hero-strip { position:absolute; left:0; right:0; bottom:0; z-index:3; background: rgba(12,16,13,0.34); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-top:1px solid rgba(255,255,255,0.14); }
.vieco-hero-strip .vieco-strip-inner { max-width:1200px; margin:0 auto; padding: 13px clamp(1.25rem,5vw,2rem); display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.vieco-hero-strip .vieco-strip-item { display:flex; align-items:center; gap:.55rem; color:#F4F1EA; font-size:13px; line-height:1.25; }
.vieco-hero-strip svg { width:20px;height:20px;stroke:#F4F1EA;stroke-width:1.5;fill:none;flex:0 0 auto; stroke-linecap:round;stroke-linejoin:round; }
.vieco-hero-strip strong { font-weight:600; display:block; }
@media (max-width:900px){ .vieco-hero-strip .vieco-strip-inner { grid-template-columns:repeat(2,1fr); gap:.7rem 1rem; } }

/* Header transparente (home) -> sólido al hacer scroll (clase JS body.vieco-header-solid).
   Nota: Kadence clona el header en una copia position:fixed FUERA de #masthead para el sticky,
   por eso los selectores NO llevan prefijo #masthead: deben alcanzar el clon visible (z-index 1200). */
body.transparent-header .site-main-header-wrap { transition: background 300ms ease, box-shadow 300ms ease !important; }
/* Estado transparente: velo degradado (oscuro->0) para legibilidad de logo+menu blancos sobre cualquier zona del hero */
body.transparent-header:not(.vieco-header-solid) .site-main-header-wrap { background: linear-gradient(180deg, rgba(12,16,13,0.50) 0%, rgba(12,16,13,0.18) 60%, rgba(12,16,13,0) 100%) !important; box-shadow: none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
body.transparent-header:not(.vieco-header-solid) .site-main-header-wrap .custom-logo { filter: brightness(0) invert(1) !important; }
body.transparent-header:not(.vieco-header-solid) .site-main-header-wrap .main-navigation a { color: #FAF7F2 !important; }
body.transparent-header.vieco-header-solid .site-main-header-wrap { background: var(--vieco-crema) !important; box-shadow: 0 2px 24px rgba(26,29,27,0.08) !important; }
body.transparent-header.vieco-header-solid .site-main-header-wrap .main-navigation a { color: var(--vieco-tinta) !important; }
body.transparent-header.vieco-header-solid .site-main-header-wrap .custom-logo { filter: none !important; }

/* Motion v2.1: fade-up 24px 600ms */
html.vieco-anim .vieco-reveal { opacity:0; transform: translateY(24px) scale(1.02); transform-origin: 50% 100%; }
html.vieco-anim .vieco-reveal.vieco-visible { opacity:1; transform:none; transition: opacity 600ms var(--vieco-ease), transform 600ms var(--vieco-ease); transition-delay: var(--vieco-stagger,0ms); }
.vieco-cat-v2 .vieco-cat-foto img, .vieco-somos-foto img, .vieco-intro-foto img { transition: transform 700ms var(--vieco-ease) !important; }
.vieco-cat-v2:hover .vieco-cat-foto img, .vieco-somos-foto:hover img, .vieco-intro-foto:hover img { transform: scale(1.03); }

/* ============================================================
   SISTEMA E3 — interiores al sistema v2 (2026-07-08)
   ============================================================ */

/* Header transparente: sin línea inferior mientras es transparente */
body.transparent-header:not(.vieco-header-solid) .site-main-header-wrap { border-bottom: 0 !important; }

/* --- Catálogo /productos/: tarjetas sin borde, imagen cuadrada, toda la tarjeta clickeable con flecha --- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	position: relative;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.woocommerce ul.products li.product .product-details {
	background: transparent !important; border: 0 !important; box-shadow: none !important;
	padding: 1rem 0 0 !important;
}
.woocommerce ul.products li.product .woocommerce-loop-image-link {
	position: relative; display: block; overflow: hidden;
	border-radius: 12px; aspect-ratio: 1 / 1; background: #fff;
}
.woocommerce ul.products li.product .woocommerce-loop-image-link img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 700ms var(--vieco-ease);
}
.woocommerce ul.products li.product:hover .woocommerce-loop-image-link img { transform: scale(1.04); }
.woocommerce ul.products li.product .woocommerce-loop-image-link::after {
	content: "\2192"; position: absolute; right: 12px; bottom: 12px; z-index: 3; pointer-events: none;
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--vieco-verde); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 19px; line-height: 1;
	opacity: 0; transform: translateY(8px);
	transition: opacity 250ms var(--vieco-ease), transform 250ms var(--vieco-ease);
}
.woocommerce ul.products li.product:hover .woocommerce-loop-image-link::after { opacity: 1; transform: translateY(0); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 17px !important; line-height: 1.32; font-weight: 600; padding: 0 !important; margin: 0 0 .3rem !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title a { color: var(--vieco-tinta); text-decoration: none; }
.woocommerce ul.products li.product .price {
	color: var(--vieco-tinta) !important; font-size: 17px !important; font-weight: 700 !important; margin: 0 !important; display: block;
}
.woocommerce ul.products li.product .price .woocommerce-Price-amount { color: var(--vieco-tinta); font-weight: 700; }
.woocommerce ul.products li.product .price .woocommerce-price-suffix { font-size: 12px; font-weight: 500; color: var(--global-palette5); }
.woocommerce ul.products li.product .vieco-loop-unidades { font-size: 14px; color: var(--global-palette5); margin: .3rem 0 0 !important; }
.woocommerce ul.products li.product .product-excerpt { display: none !important; }
/* toda la tarjeta clickeable: stretched link sobre el título */
.woocommerce ul.products li.product .woocommerce-loop-product__title a::before {
	content: ""; position: absolute; inset: 0; z-index: 2;
}

/* --- Ficha de producto: título display reducido + galería con zoom --- */
.single-product .product_title,
.single-product h1.product_title.entry-title {
	font-size: clamp(2rem, 3.5vw, 3rem) !important; line-height: 1.08 !important; letter-spacing: -0.01em;
}
.single-product .woocommerce-product-gallery__image { overflow: hidden; border-radius: 12px; }
.single-product .woocommerce-product-gallery__image img { transition: transform 700ms var(--vieco-ease) !important; }
.single-product .woocommerce-product-gallery__image:hover img { transform: scale(1.04); }

/* --- Formularios: campos redondeados 12px (no píldora) --- */
.ff-el-form-control,
.frm-fluent-form select, .frm-fluent-form textarea,
.mailpoet_form input.mailpoet_text, .mailpoet_form input.mailpoet_email, .mailpoet_form textarea.mailpoet_textarea {
	border-radius: 12px !important;
}

/* --- Nosotros: hero tipográfico (crema, H1 gigante, sin foto) --- */
.vieco-hero-tipo { background: var(--vieco-crema); text-align: left; }
.vieco-hero-tipo .vieco-hero-tipo-inner { max-width: 1100px; margin: 0 auto; }
.vieco-hero-tipo h1 { max-width: 18ch; margin: 0; }
.vieco-hero-tipo .vieco-hero-tipo-lead { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.5; color: var(--global-palette5); max-width: 58ch; margin: 1.5rem 0 0; }

/* Nosotros: banda de foto contenida con zoom */
.vieco-nosotros-foto { max-width: 1100px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; }
.vieco-nosotros-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms var(--vieco-ease); }
.vieco-nosotros-foto:hover img { transform: scale(1.03); }

/* Flecha en el botón primario de ficha (coherencia con las píldoras de la home) */
a.vieco-btn-distribuidor::after { content: "\00a0\2192"; display: inline-block; transition: transform 250ms var(--vieco-ease); }
a.vieco-btn-distribuidor:hover::after { transform: translateX(5px); }

/* Footer: encabezados de columna uniformes (Enlaces era H2 a 52px) */
.site-footer h2, .site-footer h3, .site-footer .widget-title {
	font-size: 13px !important;
	line-height: 1.2 !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	color: var(--global-palette5) !important;
	margin: 0 0 1.1rem !important;
}

/* ============================================================
   AJUSTES DE CRÍTICA (impeccable, 2026-07-08)
   ============================================================ */
/* [P1] Gris atenuado a nivel AA: #6B6F68 daba 4.14:1 sobre arena → #5A5E57 = ~5.2:1 */
body { --global-palette5: #5A5E57; }

/* [P2] Franja de sellos: subir el velo para AA del texto 13px sobre zonas claras de la foto */
.vieco-hero-strip { background: linear-gradient(180deg, rgba(12,16,13,0.30) 0%, rgba(12,16,13,0.58) 100%) !important; }

/* [P2] Hero: base cálida bajo la imagen para evitar el destello gris antes de decodificar */
.vieco-hero-v2 { background-color: #241C15; }

/* [P2] Catálogo: fondo unificado crema (elimina la costura crema/arena; cumple E3 "tarjetas sobre fondo crema") */
body.post-type-archive-product, body.tax-product_cat { background-color: var(--vieco-crema) !important; }

/* ============================================================
   CAPA INMERSIVA (2026-07-13) — fluidez sin WebGL
   ============================================================ */
/* Lenis: base recomendada */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* (Reveal de titulares por linea retirado 2026-08-04: ocultaba el H1 al cargar.) */

/* Unveil: barrido crema sobre fotos de seccion (el catalogo queda fuera) */
.vieco-unveil { position: relative; }
html.vieco-anim .vieco-unveil::after {
	content: ""; position: absolute; inset: -1px; z-index: 2; pointer-events: none;
	background: var(--vieco-crema);
	transform-origin: 100% 50%;
	transition: transform 500ms var(--vieco-ease) 80ms;
}
html.vieco-anim .vieco-unveil.vieco-visible::after { transform: scaleX(0); }

/* Marquee de claims aprobadas (CSS puro, ~60s/vuelta) */
.vieco-marquee { overflow: hidden; background: #fff; border-top: 1px solid var(--global-palette6); border-bottom: 1px solid var(--global-palette6); padding: 14px 0; }
.vieco-marquee-track { display: flex; width: max-content; animation: viecoMarquee 60s linear infinite; }
.vieco-marquee-track > span { white-space: nowrap; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--vieco-verde); }
@keyframes viecoMarquee { to { transform: translateX(-50%); } }

/* Fotos de los pasos (nosotros) */
.vieco-paso-foto { margin: 1.1rem 0 0; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--vieco-arena); }
.vieco-paso-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vieco-paso-foto.contiene-abajo img { object-fit: contain; object-position: 50% 100%; padding: 10% 10% 0; }
.vieco-paso-foto.duo { position: relative; }
.vieco-paso-foto.duo img { position: absolute; width: auto; height: auto; max-width: none; object-fit: contain; }
.vieco-paso-foto.duo .duo-a { left: 4%; top: 8%; width: 62%; height: 58%; }
.vieco-paso-foto.duo .duo-b { right: 5%; bottom: 6%; width: 47%; height: 47%; }

/* "Que estamos creando" (crowdfunding): texto + bagazo real */
.vieco-material2 { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; max-width: 1000px; margin: 0 auto; }
.vieco-material-foto { aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: var(--vieco-arena); }
.vieco-material-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .vieco-material2 { grid-template-columns: 1fr; gap: 2rem; } .vieco-material-foto { max-width: 420px; } }

/* Quienes somos: triptico cuadrado */
.vieco-somos-foto.cuadrada { aspect-ratio: 1 / 1; }

/* Video ambiental del hero (inyectado por JS solo en desktop + puntero fino).
   Disolvente sincronizado: el video entra Y la foto sale a la vez -> sin doble exposicion. */
/* Video del hero: va en el HTML (sin JS). Oculto por defecto -> movil y
   reduced-motion ven la FOTO. En desktop con puntero fino se muestra el video,
   cuyo poster es la MISMA foto: cero salto visual y jamas un hero en negro. */
.vieco-hero-video { display: none; }
@media (min-width: 1024px) and (pointer: fine) {
	.vieco-hero-video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; pointer-events: none; z-index: 0; }
	.vieco-hero-v2 .vieco-hero-img { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.vieco-hero-video { display: none !important; }
	.vieco-hero-v2 .vieco-hero-img { opacity: 1 !important; }
}

/* Fondos organicos sutiles (solo desktop) */
@media (min-width: 1024px) {
	.vieco-seccion-alterna, .vieco-hero-tipo { background-image: url(/wp-content/uploads/2026/07/vieco-textura-fibra-papel.webp); background-size: 520px auto; }
	.vieco-banda { background-image: url(/wp-content/uploads/2026/07/vieco-gradiente-verde-agave.webp); background-size: cover; background-position: center; }
}

/* Cinturones reduced-motion (ademas del kill global y del early-return del JS) */
@media (prefers-reduced-motion: reduce) {
	.vieco-marquee-track { animation: none !important; }
	html.vieco-anim .vieco-unveil::after { display: none !important; }
	.vieco-hero-video { display: none !important; }
}

/* FAQ de categoría (sobrio, al pie del grid) */
.vieco-faq { max-width: 760px; margin: clamp(40px,6vw,72px) auto 24px; }
.vieco-faq h2 { font-size: clamp(1.5rem, 2.4vw, 2rem) !important; line-height: 1.15 !important; margin-bottom: 1.1rem; }
.vieco-faq-item { padding: 1rem 0; }
.vieco-faq-item + .vieco-faq-item { border-top: 1px solid var(--global-palette6); }
.vieco-faq-item h3 { font-size: 17px; margin: 0 0 .4rem; }
.vieco-faq-item p { margin: 0; color: var(--global-palette5); max-width: 65ch; }

/* Safari/iOS pintan un boton de play gigante sobre el video cuando bloquean el
   autoplay. Lo ocultamos: si el autoplay no procede, se ve el poster limpio
   (la misma foto del hero) y el video arranca al primer movimiento del raton. */
.vieco-hero-video::-webkit-media-controls-start-playback-button,
.vieco-hero-video::-webkit-media-controls,
.vieco-hero-video::-webkit-media-controls-panel { display: none !important; -webkit-appearance: none !important; opacity: 0 !important; }

/* Ficha variable en MODO CATÁLOGO: conservamos el formulario de variaciones
   (es quien trae el selector de Presentación) pero ocultamos cantidad y carrito. */
.single-product .variations_form .woocommerce-variation-add-to-cart,
.single-product .variations_form .quantity,
.single-product .variations_form button.single_add_to_cart_button { display: none !important; }
.single-product .variations_form table.variations { margin: 0 0 1rem; width: 100%; }
.single-product .variations_form table.variations th.label { display: none; }
.single-product .variations_form table.variations td { padding: 0; }
.single-product .variations_form select {
	width: 100%; max-width: 520px; padding: .8rem 1rem; font-size: 16px;
	border: 1px solid #D8D2C4; border-radius: 12px; background: #fff; color: var(--vieco-tinta);
}
.single-product .variations_form select:focus { border-color: var(--vieco-verde); box-shadow: 0 0 0 3px rgba(20,83,45,.12); outline: none; }
.single-product .variations_form .reset_variations { font-size: 13px; color: var(--global-palette5); }
.single-product .woocommerce-variation-price { margin: .35rem 0 0; font-size: 1.25rem; font-weight: 700; }
.woocommerce ul.products li.product .vieco-desde { font-size: 14px; font-weight: 500; color: var(--global-palette5); }

/* ============================================================
   Pasada móvil de Victor (2026-08-06)
   ============================================================ */
/* Honeypot de Fluent Forms: su etiqueta "Contact" se veía cuando el CSS del
   plugin no llegaba. Lo ocultamos también desde el tema (defensa en profundidad).
   No afecta al antispam: los bots rellenan el campo igual. */
.ff-hpsf-container { display: none !important; position: absolute !important; left: -9999px !important; }

/* MailPoet (/crowdfunding/): campos al 100% y misma alineación que la sección.
   Antes se renderizaban a ~50% y pegados a la izquierda dentro de texto centrado. */
.mailpoet_form { max-width: 520px; margin-left: auto; margin-right: auto; text-align: left; }
.mailpoet_form .mailpoet_paragraph { margin: 0 0 1rem; width: 100% !important; }
.mailpoet_form .mailpoet_paragraph > label { display: block; margin-bottom: .35rem; }
.mailpoet_form input.mailpoet_text,
.mailpoet_form input.mailpoet_email,
.mailpoet_form textarea.mailpoet_textarea,
.mailpoet_form select.mailpoet_select {
	width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
	display: block !important; float: none !important;
	border: 1px solid #D8D2C4 !important; border-radius: 12px !important;
	padding: .8rem 1rem !important; background: #fff !important;
	color: var(--vieco-tinta) !important; font-size: 16px !important;
}
.mailpoet_form input.mailpoet_text:focus,
.mailpoet_form input.mailpoet_email:focus,
.mailpoet_form textarea.mailpoet_textarea:focus {
	border-color: var(--vieco-verde) !important;
	box-shadow: 0 0 0 3px rgba(20,83,45,.12) !important; outline: none !important;
}
.mailpoet_form .mailpoet_checkbox_label { display: flex; align-items: flex-start; gap: .55rem; font-size: 14px; line-height: 1.45; }
.mailpoet_form input.mailpoet_checkbox { width: auto !important; margin: .2rem 0 0 !important; flex: 0 0 auto; }
.mailpoet_form input.mailpoet_submit { width: 100% !important; max-width: 100% !important; display: block !important; }
/* El honeypot de MailPoet ya trae display:none inline; lo reforzamos. */
.mailpoet_form .mailpoet_paragraph > label[style*="display: none"] { display: none !important; }
/* Mensajes de estado: sin caja vacía antes de enviar */
.mailpoet_form .mailpoet_message:empty { display: none !important; }
@media (max-width: 480px) { .mailpoet_form { max-width: 100%; } }
/* Ajuste fino tras inspeccionar el DOM real de MailPoet 5.x:
   el campo de correo usa la clase .mailpoet_text (no .mailpoet_email),
   y la etiqueta del checkbox necesita más especificidad. */
.mailpoet_form input[type="email"].mailpoet_text,
.mailpoet_form input[type="text"].mailpoet_text { width: 100% !important; display: block !important; }
.mailpoet_form label.mailpoet_checkbox_label { display: flex !important; align-items: flex-start; gap: .55rem; }
.mailpoet_form label.mailpoet_checkbox_label input.mailpoet_checkbox { width: auto !important; margin: .25rem 0 0 !important; flex: 0 0 auto; }
.mailpoet_form label.mailpoet_text_label { display: block; margin-bottom: .35rem; font-size: 14px; font-weight: 600; }

/* === LANZAMIENTO 2026-10 ====================================================
   Hero en móvil: la franja de sellos entra en el flujo. Flotando (absolute)
   tapaba el CTA "Solicita tu precio de distribuidor" en pantallas ≤ 400 px.
   Probado a 360, 375 y 1280 px (escritorio no cambia). */
@media (max-width: 767px) {
	.vieco-hero-v2 { flex-direction: column; align-items: stretch; }
	.vieco-hero-contenido { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; padding-bottom: 2rem; }
	.vieco-hero-strip { position: relative; flex: 0 0 auto; }
}
/* Objetivos táctiles ≥ 24 px (WCAG 2.5.8) en enlaces de texto sueltos, sin mover el layout. */
.vieco-link-flecha, .vieco-contacto-linea a, .site-footer .wp-block-paragraph a { padding-block: 3px; }

/* === RONDA 2 · 2026-10 ============================================== */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-500-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Tipografía B: IBM Plex Sans la carga Kadence en local; IBM Plex Mono, aquí, para etiquetas técnicas. */
h1, h2, h3, h4 { letter-spacing: -0.025em; }
.vieco-eyebrow, .vieco-capitulo-num, .vieco-strip-item strong, .sku_wrapper, .vieco-ficha-tecnica th { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.02em; }
/* Nosotros: historia en capítulos, todas las fotos en el mismo formato 4:3. */
.vieco-capitulos { max-width: 1100px; margin: 0 auto; display: grid; gap: clamp(3.5rem, 8vw, 6.5rem); }
.vieco-capitulo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 5vw, 4.5rem); align-items: center; }
.vieco-capitulo-invertido .vieco-capitulo-foto { order: 2; }
.vieco-capitulo-foto { margin: 0; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--vieco-arena); }
.vieco-capitulo-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vieco-capitulo-num { display: block; font-size: 0.85rem; font-weight: 500; color: var(--vieco-verde); margin-bottom: 0.9rem; }
.vieco-capitulo-texto h2 { margin: 0 0 1rem; }
.vieco-capitulo-texto p { max-width: 52ch; margin: 0; }
.vieco-cierre .vieco-cierre-alt { margin-top: 1.1rem; }
@media (max-width: 767px) {
	.vieco-capitulo { grid-template-columns: 1fr; }
	.vieco-capitulo-invertido .vieco-capitulo-foto { order: 0; }
}

/* CROWDFUNDING FONDO · 2026-10: foto de laboratorio (Pexels 1366942, Rodolfo Clix) detrás del encabezado de /crowdfunding/ */
.vieco-cf-hero { position: relative; isolation: isolate; overflow: hidden; background-color: #121614; }
.vieco-cf-hero .vieco-cf-fondo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 60% 50%; z-index: -2; }
.vieco-cf-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 22, 15, .85) 0%, rgba(10, 22, 15, .70) 60%, rgba(10, 22, 15, .55) 100%); }
.vieco-cf-hero h1 { color: #fff; }
.vieco-cf-hero .vieco-eyebrow { color: #A7C4AE; }
.vieco-cf-hero .vieco-cf-lead { color: rgba(255, 255, 255, .86); font-size: 1.125rem; line-height: 1.6; max-width: 65ch; }
@media (max-width: 767px) { .vieco-cf-hero::after { background: rgba(10, 22, 15, .74); } }

/* === MÓVIL · 2026-10 ========================================================
   Pasada de celular. Probado a 375 px; en escritorio solo cambia el área táctil del botón del menú. */
.menu-toggle-open { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.vieco-wa { display: none; }

@media (max-width: 767px) {
	/* Enlaces de texto con área táctil de 44 px, sin cambiar su aspecto. */
	.vieco-link-flecha, .vieco-link-blanco { display: inline-flex; align-items: center; min-height: 44px; }
	.vieco-contacto-linea a { display: inline-block; white-space: nowrap; padding-block: 10px; }
	.site-footer .menu a, .site-footer .wp-block-paragraph a { display: inline-flex; align-items: center; min-height: 44px; }

	/* Inicio · sellos: solo el nombre, en una línea y con la letra del cuerpo. */
	.vieco-hero-strip .vieco-strip-inner { gap: .85rem 1rem; padding-block: 16px; }
	.vieco-hero-strip .vieco-strip-item > div { font-size: 0; line-height: 0; }
	.vieco-hero-strip .vieco-strip-item strong { font-family: inherit; font-size: 14px; line-height: 1.3; letter-spacing: 0; }

	/* Inicio · "Por qué": numerales más discretos para no alargar la página. */
	.vieco-porque { gap: 2rem; }
	.vieco-porque-item { padding-top: 2rem; }
	.vieco-porque-item .vieco-num { font-size: 48px; }

	/* Banda verde: el botón de dos líneas deja la forma de píldora. */
	.vieco-btn-ghost-crema .wp-block-button__link { border-radius: 14px !important; text-align: center; }

	/* Catálogo y categorías: dos columnas y sin el hueco de 200 px sobre el título. */
	.product-archive-title { min-height: 0; padding-block: .5rem 1.5rem; }
	.woocommerce-result-count, .woocommerce-ordering { display: none !important; }
	.woocommerce ul.products.product-archive { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 14px; row-gap: 32px; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 15px; line-height: 1.3; }
	.woocommerce ul.products li.product .price { font-size: 15px; }
	.woocommerce ul.products li.product .vieco-loop-unidades { font-size: 13px; }

	/* Ficha técnica: la etiqueta arriba y el valor a todo el ancho. */
	.vieco-ficha-tecnica table, .vieco-ficha-tecnica tbody, .vieco-ficha-tecnica tr, .vieco-ficha-tecnica th, .vieco-ficha-tecnica td { display: block; width: auto; }
	.vieco-ficha-tecnica th { padding-bottom: .1rem !important; }
	.vieco-ficha-tecnica td { padding-top: 0 !important; }

	/* Formularios: casillas que se atinan con el dedo. */
	.fluentform input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--vieco-verde); }

	/* WhatsApp flotante; el pie deja espacio para que no tape nada. */
	.vieco-wa { display: inline-flex; align-items: center; gap: .45rem; position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 90; min-height: 48px; padding: 0 18px 0 14px; border-radius: 999px; background: var(--vieco-verde); color: #fff !important; font-weight: 600; font-size: 15px; text-decoration: none; box-shadow: 0 6px 20px rgba(20, 30, 24, .28); }
	.vieco-wa svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
	.site-footer { padding-bottom: 72px; }
}
/* MÓVIL · 2026-10 · ajuste: estas reglas de Kadence ganaban por especificidad. */
@media (max-width: 767px) {
	.entry-hero.product-archive-hero-section .entry-header.product-archive-title { min-height: 0 !important; padding-block: .25rem 1rem; }
	.woocommerce ul.products li.product .price { font-size: 15px !important; line-height: 1.35 !important; }
	.woocommerce ul.products li.product .price .woocommerce-price-suffix { white-space: nowrap; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 15px !important; }
	.single-product .variations select { padding-left: 12px !important; padding-right: 30px !important; text-overflow: ellipsis; }
}

/* NOSOTROS FONDO · 2026-10: encabezado de /nosotros/ con foto de fondo (Pexels 8851084), mismo tratamiento que /crowdfunding/ (.vieco-cf-hero) */
.vieco-nosotros-hero { background-color: #121614; background-image: none; }
.vieco-nosotros-hero .vieco-hero-tipo-lead { color: rgba(255, 255, 255, .86); }

/* === PIE · 2026-10 v2 =======================================================
   Contacto del pie con los íconos de /contacto/ (el cierre del inicio ya no repite los datos).
   Celular: pie de ~315 px (era 831). Sin el bloque "Vieco" (el copyright dice lo mismo), rótulos "Enlaces" y "Contacto"
   solo para lectores de pantalla, texto de 15 px y los enlaces en una fila. Se conservan los 44 px de área táctil
   (ronda 4) y los 72 px libres para el botón de WhatsApp. */
@supports selector(:has(*)) {
	.footer-widget3 .wp-block-paragraph:has(a[href^="mailto:"])::before,
	.footer-widget3 .wp-block-paragraph:has(a[href*="wa.me"])::before,
	.footer-widget3 .wp-block-paragraph:not(:has(a))::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: .55rem; vertical-align: -3px; background: center / contain no-repeat; }
	.footer-widget3 .wp-block-paragraph:has(a[href^="mailto:"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314532D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
	.footer-widget3 .wp-block-paragraph:has(a[href*="wa.me"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314532D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5a8 8 0 0 1-11.5 7.2L4 20l1.3-4.4A8 8 0 1 1 20 11.5z'/%3E%3Cpath d='M9 12h.01M12 12h.01M15 12h.01'/%3E%3C/svg%3E"); }
	.footer-widget3 .wp-block-paragraph:not(:has(a))::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314532D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-5.3-6-10a6 6 0 1 1 12 0c0 4.7-6 10-6 10z'/%3E%3Ccircle cx='12' cy='11' r='2.2'/%3E%3C/svg%3E"); }
}
@media (max-width: 767px) {
	.site-footer { font-size: 15px; line-height: 1.5; }
	.site-footer .site-middle-footer-inner-wrap { padding-block: 12px 8px; gap: 8px; }
	.site-footer .site-footer-middle-section-1 { display: none; }
	.site-footer .footer-widget2 .widget-title, .site-footer .footer-widget3 h3 { position: absolute; width: 1px; height: 1px; margin: -1px !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.site-footer .wp-block-paragraph { margin-block: 0; }
	.site-footer .menu { display: flex; flex-wrap: wrap; column-gap: 22px; }
	.site-footer .site-bottom-footer-inner-wrap { padding-block: 8px 12px; }
	.site-footer .footer-html { margin: 0; font-size: 13px; }
	.site-footer .footer-html p { text-wrap: balance; }
}

/* === POR QUÉ · TRÍPTICO · 2026-10 ============================================
   Cada punto lleva su tercio del tríptico (att 784), recortado por dentro de las costuras de la foto.
   Entra con el barrido de foto del sitio y un zoom que se asienta, escalonado 01 → 03. Al pasar el cursor, el punto
   activo se queda en color y las otras fotos se apagan un poco. Sin JS o con reduced-motion todo queda visible y quieto.
   En celular, miniatura a la izquierda de cada punto. */
.vieco-porque-item { padding-top: 0; }
.vieco-porque-texto { position: relative; padding-top: 2.75rem; margin-top: 1.25rem; }
.vieco-porque-foto { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate; border-radius: 12px; background: var(--vieco-arena); }
.vieco-porque-item .vieco-porque-foto img { display: block; width: var(--w); max-width: none; height: 100%; margin-left: var(--m); object-fit: cover; object-position: 50% var(--y); transform-origin: var(--ox) 50%; transition: transform 700ms var(--vieco-ease), filter 400ms ease; }
.vieco-porque-item:nth-child(1) { --w: 304.2%; --m: -.6%; --y: 42%; --ox: 16.6%; --d: 0ms; }
.vieco-porque-item:nth-child(2) { --w: 309.5%; --m: -104.6%; --y: 29%; --ox: 50%; --d: 140ms; }
.vieco-porque-item:nth-child(3) { --w: 303.4%; --m: -202.8%; --y: 37%; --ox: 83.3%; --d: 280ms; }
.vieco-porque-item .vieco-num { transition: color var(--vieco-transition); }
html.vieco-anim .vieco-porque-foto::after { background: #fff; transition-duration: 900ms; transition-delay: calc(80ms + var(--d, 0ms)); }
html.vieco-anim .vieco-porque-foto.vieco-visible img { animation: viecoAsienta 1400ms var(--vieco-ease) var(--d, 0ms) backwards; }
@keyframes viecoAsienta { from { transform: scale(1.14); } }
@media (hover: hover) and (pointer: fine) {
	.vieco-porque-item:hover .vieco-porque-foto img { transform: scale(1.05); }
	.vieco-porque:hover .vieco-porque-item:not(:hover) .vieco-porque-foto img { filter: saturate(.5) brightness(.97); }
	.vieco-porque-item:hover .vieco-num { color: color-mix(in srgb, var(--vieco-verde) 35%, var(--vieco-arena)); }
}
@media (max-width: 900px) {
	.vieco-porque-item { display: grid; grid-template-columns: 80px 1fr; column-gap: 1rem; align-items: start; }
	.vieco-porque-foto { aspect-ratio: 1; border-radius: 10px; }
	.vieco-porque-texto { margin-top: 0; padding-top: 2rem; }
}

/* === HERO MÓVIL · POPOTES · 2026-10 ==========================================
   Hasta 767 px el fondo del hero es la foto de popotes en el vaso (opción 3 de la simulación: zoom cerrado, 804×1400 recortada de la
   original), servida por <picture>. Escritorio y tableta siguen con el vaso y el vídeo. Como la foto es oscura, el velo es ×0.65 del
   publicado con la de cubiertos: simulando hero de 360 a 414 px de ancho y de 560 a 842 de alto, el texto chico queda en ≥ 5.0:1
   (percentil 95 del fondo). */
.vieco-hero-v2 picture { display: contents; }
@media (max-width: 767px) {
	.vieco-hero-v2 .vieco-hero-img { object-position: 50% 50%; }
	.vieco-hero-v2::after { background: linear-gradient(180deg, rgba(12, 16, 13, .468) 0%, rgba(12, 16, 13, .403) 22%, rgba(12, 16, 13, .442) 45%, rgba(12, 16, 13, .442) 75%, rgba(12, 16, 13, .325) 85%, rgba(12, 16, 13, .273) 100%) !important; }
}

/* === MENÚ · CONTACTO SOLO EN MÓVIL · 2026-10 ================================
   En escritorio el botón Cotizar ya lleva a /contacto/, así que el ítem Contacto del menú sobra y se oculta. En celular el encabezado
   no tiene botón y la hamburguesa es la única ruta: ahí se queda. El ítem lleva la clase vieco-solo-movil (Apariencia, Menús, Contacto,
   Clases CSS). .main-navigation es el menú de escritorio, también en la copia fija del encabezado; la hamburguesa no lo usa. */
.main-navigation .vieco-solo-movil { display: none !important; }