/* ==========================================================================
   IA FRUIT · estilos agregados (secciones nuevas, opciones del panel y correcciones)
   Los colores, fuentes y redondeos llegan como variables desde el panel (Diseño).
   ========================================================================== */

:root {
	--accent: #f3680d; --accent-ink: #fff; --brown: #553722; --brown2: #664733; --dark: #3b2721;
	--tan: #9c735a; --tan-0: #9c735a; --texto: #815941; --texto-0: #815941; --crema: #f7f1ec; --bg: #fff;
	--claro: #e3d4cb; --tan-fuerte: #99633d;
	--font-heading: 'Montserrat', sans-serif; --font-body: 'Montserrat', sans-serif;
	--r-btn: 6px; --r-card: 8px; --logo-scale: 1;
}

html { scroll-behavior: smooth; }
img { max-width: 100%; }
.centro { text-align: center; }
h1, h2, h3, h4, .secH2 { font-family: var(--font-heading); }
.ico svg, .redes svg, .flotante svg, .barraSup svg { width: 1em; height: 1em; fill: currentColor; display: block; }
[hidden] { display: none !important; }

/* ---------- Logo (tamaño desde el panel) ---------- */
header h1 a img { width: calc(min(29.3452380952vw, 18vw * var(--logo-ar, 2)) * var(--logo-scale)); }

/* ---------- Curvas decorativas: cada capa toma el color de la sección vecina ---------- */
.curva { background-image: none !important; }
.curva::before, .curva::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: cover; mask-size: cover;
}
header .forma2 .mascara.curva::after { background: var(--after-header, var(--bg)); -webkit-mask-image: url('../../img/curvas/mascara-top-b.png'); mask-image: url('../../img/curvas/mascara-top-b.png'); -webkit-mask-position: center bottom; mask-position: center bottom; }
.bcg .mascara.curva::before { background: var(--next, var(--brown)); -webkit-mask-image: url('../../img/curvas/mascara-parallax-a.png'); mask-image: url('../../img/curvas/mascara-parallax-a.png'); }
.bcg .mascara.curva::after { background: var(--prev, var(--bg)); -webkit-mask-image: url('../../img/curvas/mascara-parallax-b.png'); mask-image: url('../../img/curvas/mascara-parallax-b.png'); }
.historia .mascara.curva::before { background: var(--prev, var(--brown)); -webkit-mask-image: url('../../img/curvas/mascara-historia-a.png'); mask-image: url('../../img/curvas/mascara-historia-a.png'); }
.historia .mascara.curva::after { background: var(--self, var(--bg)); -webkit-mask-image: url('../../img/curvas/mascara-historia-b.png'); mask-image: url('../../img/curvas/mascara-historia-b.png'); }
.historia.bg-image .mascara.curva::after { display: none; }
.interna2 .mascara.curva::before { background: var(--brown); -webkit-mask-image: url('../../img/curvas/mascara-mas-productos-a.png'); mask-image: url('../../img/curvas/mascara-mas-productos-a.png'); }
.interna2 .mascara.curva::after { background: var(--bg); -webkit-mask-image: url('../../img/curvas/mascara-mas-productos-b.png'); mask-image: url('../../img/curvas/mascara-mas-productos-b.png'); }
footer { background: var(--prev, var(--bg)); }
footer .mascara.curva::before { background: var(--self, var(--brown)); -webkit-mask-image: url('../../img/curvas/top-pie-a.png'); mask-image: url('../../img/curvas/top-pie-a.png'); }

/* ---------- Títulos con línea (La Empresa / Historia), sin depender del color de fondo ---------- */
.empresa .titulo, .historia .titulo { display: flex; justify-content: center; }
.empresa .titulo .linea, .historia .titulo .linea { display: none; }
.empresa .titulo span, .historia .titulo span {
	position: static; background: none !important; width: auto; padding: 0;
	display: inline-flex; align-items: center; gap: 1.6vw; white-space: nowrap;
}
.empresa .titulo span::before, .empresa .titulo span::after { content: ""; width: 12vw; height: 1px; background: var(--claro); }
.historia .titulo span::before, .historia .titulo span::after { content: ""; width: 3vw; height: 1px; background: var(--claro); }

/* ---------- Barra superior (teléfono, e-mail, redes) ---------- */
.barraSup { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--dark); color: #f0e4dc; padding: 7px 2.6vw; font-size: 13px; line-height: 1.3; }
.barraSup .bsDatos { display: flex; gap: 22px; flex-wrap: wrap; }
.barraSup a { display: inline-flex; align-items: center; gap: 7px; color: inherit; }
.barraSup a:hover { color: #fff; }
.barraSup .redes { margin: 0; gap: 6px; }
.barraSup .redes a { width: 26px; height: 26px; font-size: 14px; background: rgba(255, 255, 255, .1); }

/* ---------- Cabecera: botón de cotización e idiomas ---------- */
.btnCotizar {
	position: absolute; z-index: 9; top: 2.1vw; right: 11.5vw;
	display: inline-flex; align-items: center; gap: .5vw;
	padding: .55vw 1.2vw; border: 2px solid #fff; border-radius: var(--r-btn);
	color: #fff; font-size: .85vw; line-height: 1; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
	background: rgba(59, 39, 33, .25); backdrop-filter: blur(2px);
	transform: translate3d(0, -100px, 0); opacity: 0; transition: transform 1s .5s, opacity 1s .5s, background .3s, border-color .3s;
}
.loaded .btnCotizar { transform: translate3d(0, 0, 0); opacity: 1; }
.btnCotizar:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btnCotizar .corto { display: none; }
header .idiomas .opciones li a { display: block; }
#click-menu { outline: none; }
#click-menu:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }

/* Menú desplegable: cantidad variable de franjas */
header ul.menuMovil li { width: calc(100% / var(--n, 5)); }
header .menuMovil li:nth-child(6) { transform: translateX(-1700px); opacity: 0; transition: .5s 1.5s; }
header .menuMovil.abierto li:nth-child(6) { opacity: 1; transform: translateX(0); }
header .menuMovil li:nth-child(7) { transform: translateX(-1700px); opacity: 0; transition: .5s 1.7s; }
header .menuMovil.abierto li:nth-child(7) { opacity: 1; transform: translateX(0); }
header .menuMovil li:nth-child(8) { transform: translateX(-1700px); opacity: 0; transition: .5s 1.9s; }
header .menuMovil.abierto li:nth-child(8) { opacity: 1; transform: translateX(0); }
header .menuMovil li:nth-child(9) { transform: translateX(-1700px); opacity: 0; transition: .5s 2.1s; }
header .menuMovil.abierto li:nth-child(9) { opacity: 1; transform: translateX(0); }
header .menuMovil li a { text-decoration: none; }
header .menuMovil li a p { text-shadow: 0 1px 6px rgba(0, 0, 0, .3); padding: 0 .5vw; }

/* ---------- Barra fija al bajar ---------- */
.barraFija {
	position: fixed; top: 0; left: 0; right: 0; z-index: 80; display: flex; align-items: center; justify-content: space-between;
	padding: 8px 2.6vw; background: rgba(255, 255, 255, .97); box-shadow: 0 6px 24px rgba(59, 39, 33, .12);
	transform: translateY(-110%); transition: transform .35s ease;
}
.barraFija.visible { transform: none; }
.barraFija .bfLogo img { height: clamp(34px, 68px / var(--logo-ar, 2), 46px); width: auto; display: block; }
.barraFija .bfAcciones { display: flex; align-items: center; gap: 14px; }
.bfCotizar { background: var(--accent); color: var(--accent-ink) !important; border-radius: var(--r-btn); padding: 9px 16px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.bfCotizar:hover { filter: brightness(.95); }
.bfMenu { width: 40px; height: 40px; border: 0; background: var(--brown); border-radius: var(--r-btn); cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 0; }
.bfMenu span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; }

/* ---------- Encabezados de sección ---------- */
.seccion { position: relative; padding: 5vw 7.1428571429vw; background: var(--bg); }
.secTitulo { text-align: center; margin: 0 auto 3vw auto; max-width: 900px; }
.secLabel {
	display: inline-flex; align-items: center; gap: 1vw;
	color: var(--tan); text-transform: uppercase; font-weight: 300; letter-spacing: .08em;
	font-size: clamp(11px, .88vw, 14px); line-height: 1.2;
}
.secLabel::before, .secLabel::after { content: ""; width: clamp(24px, 3vw, 50px); height: 1px; background: var(--claro); }
.secH2 { color: var(--tan); text-transform: uppercase; font-weight: 200; font-size: clamp(26px, 2.66vw, 44px); line-height: 1.15; margin: .6vw 0 0 0; }
.secIntro { color: var(--texto); font-size: clamp(14px, 1vw, 17px); line-height: 1.55; margin-top: 1vw; }

.btnAccion {
	display: inline-block; cursor: pointer; border: 2px solid var(--accent); border-radius: var(--r-btn);
	background: var(--accent); color: var(--accent-ink) !important; text-transform: uppercase; font-weight: 900;
	font-family: var(--font-body); font-size: clamp(14px, 1.05vw, 17px); line-height: 1;
	padding: .9em 1.6em; letter-spacing: .02em; transition: all .3s;
}
.btnAccion:hover { background: transparent; color: var(--accent) !important; }
.btnAccion[disabled], .btnAccion.enviando { opacity: .6; cursor: wait; }

/* ---------- Productos: columnas, tamaño, ajuste de foto, zoom ---------- */
.home .productos { position: relative; padding-bottom: 1vw; }
.home .productos > ul {
	display: grid !important; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 0 1.6vw;
	width: 100% !important; padding: 0 7.1428571429vw !important; margin-top: 2.380952381vw;
	--img-h: calc((85.7vw - (var(--cols, 4) - 1) * 1.6vw) / var(--cols, 4) / 1.2);
}
.productos.cols-2 > ul { --cols: 2; } .productos.cols-3 > ul { --cols: 3; } .productos.cols-4 > ul { --cols: 4; } .productos.cols-5 > ul { --cols: 5; }
.home .productos > ul > li { width: auto !important; margin: 0 0 2.4vw 0 !important; float: none !important; display: block !important; }
.home .productos > ul > li.size-l { grid-column: span 2; }
.home .productos > ul > li.size-xl { grid-column: 1 / -1; }
.home .productos > ul > li .imagen { width: 100% !important; height: var(--img-h) !important; position: relative; overflow: hidden; background: none !important; }
.productos li .imagen span, .masProductos li .imagen span { position: absolute; inset: 0; background-repeat: no-repeat; background-position: center; background-size: cover; }
.productos li .imagen.fit-contain span, .masProductos li .imagen.fit-contain span { background-size: contain; }
.masProductos ul li .imagen { position: relative; background: none !important; }
.home .productos > ul > li .cal { display: flex; flex-wrap: wrap; justify-content: center; }
.productos li .precio { text-align: center; font-weight: 700; font-size: clamp(13px, 1vw, 16px); margin-top: .3vw; }
.zoom-s { --zoom: 1.05; } .zoom-m { --zoom: 1.09; } .zoom-l { --zoom: 1.14; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.zoom-on .imagen span, .zoom-on .srvImg span { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
	.zoom-on li:hover .imagen span, .zoom-on li a:focus-visible .imagen span, .zoom-on .srvCard:hover .srvImg span { transform: scale(var(--zoom, 1.09)); }
}
.cal li.on { color: #fff; }

/* ---------- Destacados (slider) ---------- */
.destacados { position: relative; background: var(--dark); }
.dsSlides { height: var(--ds-h, 460px); overflow: hidden; }
.destacados .dsSlide { position: relative; height: var(--ds-h, 460px) !important; background-size: cover; background-position: center; display: flex !important; align-items: center; justify-content: center; }
.dsVelo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(59, 39, 33, .72), rgba(59, 39, 33, .25)); }
.dsIn { position: relative; text-align: center; max-width: 900px; padding: 0 70px; color: #fff; }
.dsLabel { display: inline-block; text-transform: uppercase; letter-spacing: .12em; font-size: clamp(12px, .9vw, 15px); font-weight: 700; color: #f0e4dc; margin-bottom: 12px; }
.dsIn h2 { color: #fff; text-transform: uppercase; font-weight: 900; font-size: clamp(26px, 3.2vw, 54px); line-height: 1.1; margin: 0 0 24px 0; text-shadow: 0 2px 12px rgba(0, 0, 0, .3); }
.dsFlecha { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .18); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.dsFlecha:hover { background: rgba(255, 255, 255, .35); }
.dsFlecha.prev { left: 2vw; } .dsFlecha.next { right: 2vw; }
.destacados .slick-dots { position: absolute; bottom: 18px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.destacados .slick-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; font-size: 0; background: rgba(255, 255, 255, .45); cursor: pointer; }
.destacados .slick-dots .slick-active button { background: #fff; }

/* ---------- Franja de fotos: sin separación, las curvas empalman con las secciones vecinas ---------- */
.home .bcg { margin-top: 0; }

/* ---------- Servicios ---------- */
.servicios { padding-top: 4vw; }
.srvGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2vw; max-width: 1280px; margin: 0 auto; }
.srvGrid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1000px; }
.srvGrid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1400px; }
.srvCard { background: #fff; border: 1px solid #efe5de; border-radius: var(--r-card); overflow: hidden; transition: transform .3s, box-shadow .3s; }
.srvCard:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(85, 55, 34, .12); }
.srvImg { aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.srvImg span { position: absolute; inset: 0; background-size: cover; background-position: center; }
.srvBody { padding: 1.6vw 1.6vw 1.8vw 1.6vw; }
.srvBody h3 { color: var(--brown); text-transform: uppercase; font-weight: 900; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.2; margin-bottom: .7vw; }
.srvBody p { color: var(--texto-0); font-size: clamp(14px, .95vw, 16px); line-height: 1.55; }
.srvBody p + p { margin-top: .6em; }

/* ---------- Pilares ---------- */
.pilares { background: var(--crema); }
.pilGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3vw; max-width: 1280px; margin: 0 auto; }
.pilGrid.n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1100px; }
.pilGrid.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 800px; }
.pilGrid.n-1 { grid-template-columns: minmax(0, 520px); justify-content: center; }
.pilar { text-align: center; }
.pilIcon { width: 76px; height: 76px; border-radius: 50%; background: var(--brown); color: #fff; display: grid; place-items: center; margin: 0 auto 18px; }
.pilIcon svg { width: 36px; height: 36px; fill: currentColor; }
.pilIcon.conImg { background: #fff; box-shadow: 0 0 0 1px #efe5de; }
.pilIcon.conImg img { width: 46px; height: 46px; object-fit: contain; }
.pilar h3 { color: var(--tan); text-transform: uppercase; font-weight: 900; font-size: clamp(15px, 1.15vw, 19px); line-height: 1.25; margin-bottom: .6em; }
.pilar p { color: var(--texto); font-size: clamp(14px, .95vw, 16px); line-height: 1.55; }
.on-dark .pilIcon:not(.conImg) { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); }

/* ---------- La Empresa: cifras ---------- */
.empresa .izq p + p, .empresa .der p + p { margin-top: .8vw; }
.empresa .der p { margin-bottom: 0; }
.empresa .der p:last-of-type { margin-bottom: 2vw; }
.empresa .der h3 + p { margin-top: 1vw; }
.empresa .der p + h3 { margin-top: 1.4vw; }
.empresa .izq p + h4 { margin-top: 2vw; }
.empresa .izq h4 + p { margin-top: 1vw; }
.empresa .cifras { clear: both; display: flex; justify-content: center; flex-wrap: wrap; padding-top: 4vw; margin: 0 auto; max-width: 1000px; }
.empresa .cifra { flex: 1 1 0; min-width: 160px; text-align: center; padding: 1vw 2vw; border-left: 1px solid color-mix(in srgb, var(--claro) 25%, transparent); }
.empresa .cifra:first-child { border-left: 0; }
.empresa .cifra strong { display: block; color: var(--claro); font-weight: 900; font-size: clamp(30px, 3.2vw, 54px); line-height: 1; font-family: var(--font-heading); }
.empresa .cifra span { display: block; color: var(--tan-fuerte); text-transform: uppercase; font-weight: 700; font-size: clamp(11px, .85vw, 14px); letter-spacing: .05em; margin-top: .6vw; }
.empresa .der .verfotos { border-radius: var(--r-btn); }

/* ---------- Historia ---------- */
.historia p + p { margin-top: 1.1vw; }

/* ---------- Mercados ---------- */
.mercados { padding-top: 3vw; }
.mkGrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2vw; max-width: 1100px; margin: 0 auto; }
.mkItem { display: flex; align-items: center; gap: 1vw; min-width: 220px; padding: 1.1vw 1.6vw; border-radius: var(--r-card); background: var(--crema); border: 1px solid #efe5de; }
.mkIco { width: clamp(24px, 1.9vw, 32px); height: clamp(24px, 1.9vw, 32px); color: var(--accent); flex: none; }
.mkIco svg { width: 100%; height: 100%; fill: currentColor; }
.mkItem strong { display: block; color: var(--brown); font-weight: 900; text-transform: uppercase; font-size: clamp(14px, 1.05vw, 17px); line-height: 1.2; }
.mkItem span { display: block; color: var(--texto-0); font-size: clamp(13px, .85vw, 15px); margin-top: 2px; }

/* ---------- Certificaciones ---------- */
.certRow { display: flex; flex-wrap: wrap; justify-content: center; gap: 3vw; max-width: 1100px; margin: 0 auto; }
.cert { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 150px; text-align: center; margin: 0; }
.cert img { height: 96px; width: auto; max-width: 150px; object-fit: contain; transition: filter .25s, opacity .25s; }
.grises .cert img { filter: grayscale(1); opacity: .75; }
.grises .cert:hover img { filter: none; opacity: 1; }
.certName { color: var(--texto); font-size: clamp(12px, .85vw, 14px); font-weight: 700; }

/* ---------- Testimonios ---------- */
.testimonios { background: var(--crema); }
.tsGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2vw; max-width: 1200px; margin: 0 auto; }
.testi { margin: 0; background: #fff; border-radius: var(--r-card); padding: 28px; border-left: 4px solid var(--accent); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; box-shadow: 0 8px 24px rgba(85, 55, 34, .06); }
.testi blockquote { margin: 0; }
.testi blockquote p { color: var(--brown); font-family: var(--font-heading); font-size: clamp(15px, 1.05vw, 18px); line-height: 1.55; font-style: italic; }
.testi figcaption { display: flex; align-items: center; gap: 12px; }
.testi figcaption img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.testi figcaption strong { display: block; color: var(--brown); font-size: 15px; }
.testi figcaption em { display: block; font-style: normal; color: var(--tan-0); font-size: 13px; }

/* ---------- Banda de cotización ---------- */
.cta { position: relative; background-color: var(--brown); background-size: cover; background-position: center; background-attachment: fixed; padding: 7vw 7.1428571429vw; text-align: center; overflow: hidden; }
.ctaVelo { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--dark) 72%, transparent), color-mix(in srgb, var(--brown) 66%, transparent)); }
.cta.bg-custom .ctaVelo, .cta.on-light .ctaVelo { display: none; }
.ctaIn { position: relative; max-width: 820px; margin: 0 auto; }
.cta h2 { color: #fff; text-transform: uppercase; font-weight: 900; font-size: clamp(24px, 2.6vw, 44px); line-height: 1.15; }
.cta p { color: #f0e4dc; font-size: clamp(15px, 1.15vw, 19px); line-height: 1.5; margin: 1.2vw auto 2.2vw auto; }
.cta.on-light h2 { color: var(--brown); }
.cta.on-light p { color: var(--texto-0); }

/* ---------- Dónde estamos ---------- */
.ubGrid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 3vw; max-width: 1200px; margin: 0 auto; align-items: center; }
.sinMapa .ubGrid { grid-template-columns: minmax(0, 600px); justify-content: center; text-align: center; }
.sinMapa .ubDato { justify-content: center; text-align: left; }
.ubDato { display: flex; gap: 14px; margin-bottom: 22px; }
.ubDato .ico { width: 22px; height: 22px; color: var(--accent); flex: none; margin-top: 2px; }
.ubDato strong { display: block; color: var(--brown); text-transform: uppercase; font-size: 13px; letter-spacing: .05em; margin-bottom: 4px; }
.ubDato p { color: var(--texto); font-size: clamp(14px, 1vw, 17px); line-height: 1.5; }
.ubMapa { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 16 / 10; background: var(--crema); box-shadow: 0 10px 30px rgba(85, 55, 34, .1); }
.ubMapa iframe { width: 100%; height: 100%; border: 0; display: block; }
.on-dark .ubDato strong { color: #fff; }

/* ---------- Contacto ---------- */
.contacto { padding-bottom: 6vw; }
.ctGrid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4vw; max-width: 1200px; margin: 0 auto; align-items: start; }
.sinForm .ctGrid { grid-template-columns: minmax(0, 700px); justify-content: center; text-align: center; }
.sinForm .ctDatos { display: inline-block; text-align: left; }
.sinForm .redes { justify-content: center; }
.ctInfo p { color: var(--texto); font-size: clamp(14px, 1vw, 17px); line-height: 1.6; }
.ctDatos { margin-top: 2vw !important; }
.ctDatos li, .pieDatos li { display: flex; align-items: flex-start; gap: .9em; line-height: 1.4; }
.ctDatos li { color: var(--brown); font-size: clamp(14px, 1vw, 17px); margin-bottom: 1em; }
.ctDatos .ico { width: 1.15em; height: 1.15em; color: var(--accent); flex: none; margin-top: .12em; }
.ctDatos a:hover { color: var(--accent); }
.on-dark .ctDatos li, .on-dark .ctDatos a { color: #fff; }
.redes { display: flex; flex-wrap: wrap; gap: .6em; margin-top: 1.5vw; }
.redes a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brown); color: #fff; font-size: 18px; transition: background .2s, transform .2s; }
.redes a:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }
.ctForm { background: var(--crema); border: 1px solid #efe5de; border-radius: var(--r-card); padding: 2.4vw; text-align: left; }
.ctFila { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2vw; }
.ctFila.uno { grid-template-columns: 1fr; }
.ctForm label { display: block; margin-bottom: 1.1vw; }
.ctForm label > span { display: block; color: var(--brown); font-weight: 700; text-transform: uppercase; font-size: clamp(11px, .75vw, 13px); letter-spacing: .04em; margin-bottom: .45em; }
.ctForm input, .ctForm select, .ctForm textarea {
	width: 100%; font-family: var(--font-body); font-size: clamp(14px, .95vw, 16px); line-height: 1.4; color: var(--dark);
	background: #fff; border: 1px solid #dccbc0; border-radius: min(var(--r-btn), 10px); padding: .75em .9em; transition: border-color .2s, box-shadow .2s;
}
.ctForm textarea { resize: vertical; min-height: 130px; }
.ctForm input:focus, .ctForm select:focus, .ctForm textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); outline: none; }
.ctForm .btnAccion { margin-top: .4vw; }
.ctForm .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ctRecaptcha { font-size: 11px !important; color: #a99282 !important; margin-top: 1em; }
.ctRecaptcha a { text-decoration: underline; }

/* ---------- Ficha de producto ---------- */
.interna .izq #solicitar { text-decoration: none; background: var(--brown2); border-color: var(--brown2); }
.interna .izq #solicitar:hover { background: #fff; color: var(--brown2); }
.fichaPrecio { font-size: clamp(16px, 1.4vw, 24px); font-weight: 900; margin: -1vw 0 1.2vw 0; }
.texto p + p { margin-top: .8vw; }
.variedades { margin: .4vw 0 1vw 0; }
.variedades > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .6vw; margin: 1.5vw 0 1vw 0 !important; }
.variedades > summary::-webkit-details-marker { display: none; }
.variedades > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s; opacity: .7; }
.variedades[open] > summary::after { transform: rotate(-135deg); }
.variedades .cuenta { font-size: .75em; background: var(--p, var(--accent)); color: var(--p-ink, #fff); border-radius: 99px; padding: 1px 7px; }
.variedad { margin-bottom: .9vw; }
.vCab { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3vw 1vw; margin-bottom: .35vw; }
.vNombre { font-size: .95vw; line-height: 1.2vw; font-weight: 900; text-transform: uppercase; }
.vOrigen, .vMeses { font-size: .8vw; color: var(--texto); }
.vMeses { font-weight: 700; }
.variedad ul.cal { margin-bottom: 0 !important; }
.logistica { margin: .6vw 0 1vw 0; }
.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15vw), 1fr)); gap: .6vw; }
.pack { border: 1px solid #ead9cd; border-radius: min(var(--r-card), 12px); background: #fff; }
.pack summary, .pack.simple { display: flex; align-items: center; gap: .6vw; padding: .6vw .8vw; font-weight: 700; color: var(--p-txt, var(--brown)); font-size: .85vw; }
.pack summary { cursor: pointer; list-style: none; }
.pack summary::-webkit-details-marker { display: none; }
.pack summary::after { content: ""; margin-left: auto; width: 6px; height: 6px; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; opacity: .6; }
.pack[open] summary::after { transform: rotate(-135deg); }
.pack[open] summary { border-bottom: 1px dashed #ead9cd; }
.pack svg { width: 1.2vw; height: 1.2vw; min-width: 16px; min-height: 16px; flex: none; fill: var(--p, var(--accent)); }
.pack dl { margin: 0; padding: .3vw .8vw .6vw; }
.pack dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1vw; padding: .3vw 0; font-size: .8vw; }
.pack dt { color: var(--texto); }
.pack dd { margin: 0; font-weight: 700; color: var(--p-txt, var(--brown)); white-space: nowrap; }
.pack dl > .total { border-top: 1px solid #ead9cd; margin-top: .2vw; padding-top: .5vw; }
.pack dl > .total dd { color: var(--p-txt, var(--accent)); }
.envios { display: flex; flex-wrap: wrap; align-items: center; gap: .5vw; margin-top: .8vw; font-size: .8vw; }
.envLabel { color: var(--texto); font-weight: 700; text-transform: uppercase; }
.envio { display: inline-flex; align-items: center; gap: .35vw; padding: .2vw .7vw .2vw .5vw; border-radius: 99px; background: color-mix(in srgb, var(--p, var(--accent)) 14%, #fff); color: var(--p-txt, var(--brown)); font-weight: 700; }
.envio svg { width: 1vw; height: 1vw; min-width: 14px; min-height: 14px; fill: currentColor; }
.noEncontrado { padding-top: 6vw; text-align: center; }
.interna2 h2 { top: 2.75vw; display: flex; align-items: center; justify-content: center; gap: 2vw; }
.interna2 h2::before, .interna2 h2::after { content: ""; width: 4.4vw; height: 1px; background: var(--tan); opacity: .8; }

/* ---------- Pie ---------- */
footer .cuerpo { position: relative; }
footer .cuerpo .pieDesc { max-width: 720px; margin: 0 auto; padding: 8.5vw 20px 0 20px !important; color: var(--claro) !important; font-size: clamp(13px, .95vw, 16px) !important; line-height: 1.6 !important; text-align: center; }
footer .cuerpo .pieCols { display: flex; justify-content: center; gap: 6vw; padding: 3vw 7vw 0 7vw; flex-wrap: wrap; }
footer .cuerpo > .iso + .pieCols { padding-top: 9.5vw; }
footer .pieCol { min-width: 180px; color: var(--claro); }
footer .pieCol h4 { color: var(--claro); text-transform: uppercase; font-weight: 700; font-size: clamp(12px, .85vw, 14px); letter-spacing: .06em; margin-bottom: 1em; }
footer .pieCol li { font-size: clamp(13px, .85vw, 14px); line-height: 1.5; margin-bottom: .5em; color: color-mix(in srgb, var(--claro) 85%, transparent); }
footer .pieCol a:hover { color: #fff; }
footer .pieDatos .ico { width: 1em; height: 1em; color: var(--tan-fuerte); flex: none; margin-top: .2em; }
footer .pieCol .redes { margin-top: 0; }
footer .pieCol .redes a { background: rgba(255, 255, 255, .08); }
footer .pieCol .redes a:hover { background: var(--accent); }
footer .pieBase { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 3vw 16px; }
footer .cuerpo .pieBase p { padding: 0 !important; font-size: clamp(11px, .78vw, 13px) !important; line-height: 1.6 !important; }
footer .cuerpo > .iso + .pieBase { padding-top: 9vw; }
footer .cuerpo.on-light { --claro: var(--texto-0); --tan: var(--texto-0); }
footer .cuerpo.on-light .pieCol a:hover { color: var(--accent); }
footer .cuerpo.on-light .redes a { background: var(--brown); }

/* Selector de idioma en el pie */
.langSwitch.enPie { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-btn); border: 1px solid color-mix(in srgb, var(--claro) 30%, transparent); }
.langSwitch.enPie a { padding: .4em .8em; border-radius: var(--r-btn); color: var(--claro); font-size: 12px; font-weight: 700; line-height: 1; }
.langSwitch.enPie a[aria-current] { background: rgba(255, 255, 255, .14); color: #fff; }

/* ---------- Botones flotantes (WhatsApp / Telegram) ---------- */
.flotantes { position: fixed; bottom: 22px; z-index: 70; display: flex; flex-direction: column; gap: 12px; }
.flotantes.pos-right { right: 22px; } .flotantes.pos-left { left: 22px; }
.flotante { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff !important; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45); transition: transform .15s; font-size: 30px; }
.flotante:hover { transform: scale(1.08); }
.flotante.wa { background: #25d366; } .flotante.tg { background: #229ed9; }

/* ---------- Fondo y trama (Panel → cada sección → Fondo y trama) ---------- */
.has-pattern { isolation: isolate; }
.has-pattern::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--pat); background-size: var(--pat-size, auto); background-repeat: repeat; opacity: var(--pat-op, .15); }
.pilares.bg-custom, .testimonios.bg-custom, .seccion.bg-custom { background-color: transparent; }
/* Letras claras sobre fondos oscuros; las tarjetas blancas conservan sus colores */
.on-dark { --tan: #f4ebe4; --texto: rgba(255, 255, 255, .86); --claro: rgba(255, 255, 255, .45); }
.on-dark :is(.srvCard, .mkItem, .ctForm, .testi, .ubMapa) { --tan: var(--tan-0); --texto: var(--texto-0); }
.bg-image.on-dark :is(.secH2, .secIntro, h2) { text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.on-dark .historia h2, .historia.on-dark h2, .historia.on-dark p { color: var(--tan); }
/* Letras oscuras en secciones que por defecto son oscuras (La Empresa, Banda de cotización, Pie) */
.empresa.on-light { --claro: var(--texto-0); --tan-fuerte: var(--tan-0); }
.empresa.on-light .cifra { border-color: color-mix(in srgb, var(--tan-0) 25%, transparent); }

/* ---------- Tablet ---------- */
@media screen and (max-width: 800px) {
	.btnCotizar { top: 22px; right: 120px; font-size: 12px; padding: 8px 12px; gap: 6px; }
	header .menuMovil li a p { font-size: 13px; }
	header h1 a img { width: calc(min(29.3452380952vw, 18vw * var(--logo-ar, 2)) * var(--logo-scale)); }
	.home .productos > ul { padding: 0 40px !important; gap: 0 20px; }
	.productos.cols-4 > ul, .productos.cols-5 > ul { --cols: 3; }
	.home .productos > ul { --img-h: calc((100vw - 80px - (var(--cols) - 1) * 20px) / var(--cols) / 1.15); }
	.home .productos > ul > li { margin-bottom: 26px !important; }
	.srvGrid, .srvGrid.cols-3, .srvGrid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.srvBody { padding: 18px; }
	.pilGrid, .pilGrid.n-3, .pilGrid.n-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
	.ctGrid, .ubGrid { grid-template-columns: 1fr; gap: 30px; }
	.ctForm { padding: 24px; }
	.ctFila { gap: 14px; }
	.ctForm label { margin-bottom: 14px; }
	.mkItem { padding: 14px 18px; gap: 12px; }
	.mkGrid { gap: 12px; }
	.secTitulo { margin-bottom: 30px; }
	.seccion { padding: 50px 40px; }
	.cta { padding: 60px 40px; background-attachment: scroll; }
	.cta p { margin: 14px auto 24px auto; }
	.empresa .cifras { padding-top: 40px; }
	.empresa .cifra span { margin-top: 8px; }
	.empresa .titulo span { gap: 14px; } .empresa .titulo span::before, .empresa .titulo span::after { width: 60px; }
	.historia .titulo span::before, .historia .titulo span::after { width: 30px; }
	.vNombre { font-size: 13px; line-height: 16px; } .vOrigen, .vMeses { font-size: 12px; }
	.vCab { gap: 4px 10px; margin-bottom: 6px; } .variedad { margin-bottom: 12px; }
	.packs { grid-template-columns: 1fr 1fr; gap: 8px; }
	.pack summary, .pack.simple { font-size: 13px; padding: 9px 11px; gap: 8px; }
	.pack dl { padding: 4px 11px 9px; } .pack dl > div { font-size: 12px; padding: 4px 0; gap: 10px; }
	.envios { font-size: 12px; gap: 6px; margin-top: 10px; } .envio { padding: 3px 10px 3px 7px; gap: 5px; }
	.fichaPrecio { margin: -10px 0 14px; }
	footer .cuerpo .pieCols { gap: 30px; }
	footer .cuerpo > .iso + .pieCols, footer .cuerpo .pieDesc { padding-top: 90px !important; }
	footer .cuerpo .pieDesc + .pieCols { padding-top: 30px !important; }
	.barraSup { padding: 7px 20px; }
	.barraFija { padding: 8px 20px; }
	.dsIn { padding: 0 60px; }
}

/* ---------- Móvil ---------- */
@media screen and (max-width: 600px) {
	.btnCotizar { top: 16px; right: auto; left: 16px; font-size: 12px; padding: 8px 12px; }
	.btnCotizar .largo { display: none; }
	.btnCotizar .corto { display: inline; }
	header .opciones { top: 18px; right: 16px; width: auto; display: flex; align-items: center; gap: 14px; }
	header .idiomas { margin-right: 0; }
	header h1 a img { width: calc(min(47.345238vw, 28vw * var(--logo-ar, 2)) * var(--logo-scale)); }
	header ul.menuMovil li { width: 100%; }
	header ul.menuMovil { height: auto; min-height: 100%; background: var(--dark); padding-top: 62px; }
	header .menuMovil li .submenu li a { padding: 2px 0; }
	.home .productos > ul, .productos.cols-2 > ul, .productos.cols-3 > ul, .productos.cols-4 > ul, .productos.cols-5 > ul { --cols: 1; padding: 0 20px !important; }
	.home .productos > ul { --img-h: 54vw; }
	.home .productos > ul > li.size-l, .home .productos > ul > li.size-xl { grid-column: auto; }
	.seccion { padding: 40px 20px; }
	.srvGrid, .srvGrid.cols-2, .srvGrid.cols-3, .srvGrid.cols-4, .pilGrid, .pilGrid.n-2, .pilGrid.n-3, .pilGrid.n-4 { grid-template-columns: 1fr; }
	.ctFila { grid-template-columns: 1fr; gap: 0; }
	.ctForm { padding: 20px; }
	.ctForm .btnAccion { width: 100%; }
	.mkItem { min-width: 0; width: 100%; }
	.empresa .cifra { flex: 1 1 100%; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--claro) 20%, transparent); padding: 18px 0; }
	.empresa .cifra:first-child { border-top: 0; }
	.empresa .titulo span { font-size: 22px; }
	.cta { padding: 50px 20px; }
	.certRow { gap: 24px; } .cert { width: 120px; } .cert img { height: 72px; }
	.packs { grid-template-columns: 1fr; }
	.barraSup { justify-content: center; font-size: 12px; } .barraSup .bsDatos { gap: 14px; justify-content: center; }
	.barraFija .bfLogo img { height: clamp(28px, 56px / var(--logo-ar, 2), 40px); }
	.flotantes { bottom: 14px; } .flotantes.pos-right { right: 14px; } .flotantes.pos-left { left: 14px; }
	.flotante { width: 52px; height: 52px; font-size: 26px; }
	.dsIn { padding: 0 50px; } .dsFlecha { width: 36px; height: 36px; font-size: 24px; }
	.dsSlides, .destacados .dsSlide { height: min(var(--ds-h, 460px), 70vh) !important; }
	footer .cuerpo .pieCols { flex-direction: column; align-items: center; text-align: center; gap: 24px; padding: 30px 20px 0 20px; }
	footer .cuerpo > .iso + .pieCols, footer .cuerpo .pieDesc { padding-top: 70px !important; }
	footer .pieCol .redes, footer .pieDatos li { justify-content: center; }
	footer .pieBase { padding: 24px 16px; }
	.interna2 h2 { top: 14px; gap: 14px; }
	.interna2 h2::before, .interna2 h2::after { width: 30px; }
}

/* ---------- Cabecera: franja del logo, franja de madera y escudo (Panel → Cabecera) ---------- */
/* La franja del logo se arma con capas de color sobre la sombra original; sin soporte de máscaras queda la imagen original. */
header .forma .fb { display: none; }
@supports ((-webkit-mask-image: url("x.png")) or (mask-image: url("x.png"))) {
	header .forma.fb-on { background-image: url('../../img/curvas/cab-franja-sombra.png'); }
	header .forma .fb { display: block; position: absolute; inset: 0; pointer-events: none;
		-webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center top; mask-position: center top; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
	header .forma .fb-fill { background: var(--band, #fff); -webkit-mask-image: url('../../img/curvas/cab-franja-relleno.png'); mask-image: url('../../img/curvas/cab-franja-relleno.png'); }
	header .forma .fb-a { background: var(--band-a, #553722); -webkit-mask-image: url('../../img/curvas/cab-franja-borde-a.png'); mask-image: url('../../img/curvas/cab-franja-borde-a.png'); }
	header .forma .fb-b { background: var(--band-b, #815941); -webkit-mask-image: url('../../img/curvas/cab-franja-borde-b.png'); mask-image: url('../../img/curvas/cab-franja-borde-b.png'); }
}
header .lineas .lin { display: block; position: absolute; width: 63.6904761905vw; aspect-ratio: 1125 / 17; margin: 0 auto; left: 0; right: 0; top: 14vw;
	background: var(--lineas, var(--accent)); -webkit-mask: url('../../img/lineas-logo.svg') center / 100% 100% no-repeat; mask: url('../../img/lineas-logo.svg') center / 100% 100% no-repeat; }
/* Franja de madera con color, imagen o trama */
header .forma2.bg-custom { background-color: var(--dark); }
header .forma2 .cabTrama { position: absolute; inset: 0; pointer-events: none; background-image: var(--pat); background-size: var(--pat-size, auto); background-repeat: repeat; opacity: var(--pat-op, .15); }
/* Escudo de un color: misma forma, sombra y borde interior del original */
header .forma2 .escudoColor { aspect-ratio: 368 / 384; }
header .forma2 .escudoColor .ec { position: absolute; inset: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
header .forma2 .escudoColor .ec-sombra { background: url('../../img/curvas/escudo-sombra.png') center / 100% 100% no-repeat; }
header .forma2 .escudoColor .ec-fill { background: var(--esc, #3b220e); -webkit-mask-image: url('../../img/curvas/escudo-forma.png'); mask-image: url('../../img/curvas/escudo-forma.png'); }
header .forma2 .escudoColor .ec-borde { background: var(--esc-l, #523521); -webkit-mask-image: url('../../img/curvas/escudo-borde.png'); mask-image: url('../../img/curvas/escudo-borde.png'); }
/* Textos y adorno */
header .forma2 h2 { color: var(--hd-t, #fff); }
header .forma2 h3 { color: var(--hd-s, var(--texto)); }
header .forma2 .adornoColor { aspect-ratio: 87 / 27; background: var(--hd-o, #815941); -webkit-mask: url('../../img/adorno-productos.svg') center / 100% 100% no-repeat; mask: url('../../img/adorno-productos.svg') center / 100% 100% no-repeat; }
/* Sin escudo: el título y el subtítulo suben para quedar dentro de la franja */
header .forma2.sinEscudo h2 { top: 4.3vw; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
header .forma2.sinEscudo h3 { top: 6.5vw; text-shadow: 0 1px 6px rgba(0, 0, 0, .3); }
header .forma2.sinEscudo .adorno { top: 8.4vw; }
header .forma2.sinEscudo.tintaOscura h2, header .forma2.sinEscudo.tintaOscura h3 { text-shadow: none; }
@media screen and (max-width: 600px) {
	header .lineas .lin { width: 92.690476vw; top: 20vw; }
	header .forma2.sinEscudo h2 { top: 4.4vw; }
	header .forma2.sinEscudo h3 { top: 9.6vw; }
	header .forma2.sinEscudo .adorno { display: none; }
}

/* ---------- Letras y fuente de cada sección (Panel → cada sección → Letras y fuente) ---------- */
/* Fuentes: la sección redefine --font-heading / --font-body; los títulos ya usan esas variables. */
.t-fb { font-family: var(--font-body); }
.t-fh :is(.empresa .titulo span, .cifra strong, .ubDato strong, .mkItem strong, .testi figcaption strong, .dsIn h2, .cta h2) { font-family: var(--font-heading); }
/* Títulos */
.c-tt :is(.secH2, .dsIn h2, .pilar h3, .empresa .titulo span, .izq h3, .izq h4, .der h3, .cifra strong, .ubDato strong, .pieCol h4),
.historia.c-tt h2, .cta.c-tt h2 { color: var(--tt) !important; }
/* Textos */
.c-tx :is(.secIntro, .pilar p, .izq p, .der p, .verfotos span, .certName, .ubDato p, .ctInfo p, .ctDatos li, .ctDatos a, .pieDesc, .pieCol li, .pieCol a, .pieBase p, .pieBase a),
.historia.c-tx p, .cta.c-tx p { color: var(--tx) !important; }
/* Texto chico sobre el título, detalles y líneas */
.c-tl :is(.secLabel, .dsLabel, .cifra span, .historia .titulo span) { color: var(--tl) !important; }
.historia.c-tl .titulo span { color: var(--tl) !important; }
.c-tl :is(.secLabel, .titulo span)::before, .c-tl :is(.secLabel, .titulo span)::after { background: var(--tl) !important; }
.c-tl .cifra { border-color: color-mix(in srgb, var(--tl) 30%, transparent) !important; }
.c-tl :is(.ctDatos .ico, .ubDato .ico, .pieDatos .ico) { color: var(--tl) !important; }
/* También dentro de las tarjetas (servicios, mercados, testimonios, formulario) */
.c-cards.c-tt :is(.srvBody h3, .mkItem strong, .testi figcaption strong) { color: var(--tt) !important; }
.c-cards.c-tx :is(.srvBody p, .mkItem span, .testi blockquote p, .ctForm label > span) { color: var(--tx) !important; }
.c-cards.c-tl :is(.testi figcaption em, .mkIco) { color: var(--tl) !important; }