/*
Theme Name: Vetro Stampato
Theme URI: https://stampato.com.ar/
Description: Tema hijo de Twenty Twenty-Five para Vetro Stampato. Reemplaza a Kubio con bloques nativos de WordPress y mide conversiones de WhatsApp y formulario para Google Ads.
Author: 07 Marketing
Author URI: https://07marketing.com.ar/
Template: twentytwentyfive
Version: 1.0.5
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stampato-vetro
*/

:root {
	--st-navy: var(--wp--preset--color--accent-1);
	--st-agua: var(--wp--preset--color--accent-2);
	--st-crema: var(--wp--preset--color--accent-3);
	--st-hielo: var(--wp--preset--color--accent-4);
	--st-petroleo: var(--wp--preset--color--accent-5);
	--st-acento: var(--wp--preset--color--accent-6);
	--st-wa: #25D366;
	--st-radius: 16px;
	--st-shadow: 0 18px 45px rgba(34, 67, 106, .14);
	--st-pad: clamp(3.5rem, 8vw, 6.5rem);
}

body { font-family: var(--wp--preset--font-family--mulish); }
[id] { scroll-margin-top: 96px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* Separación cero entre header, contenido y footer */
.wp-site-blocks > .st-main, .wp-site-blocks > main, .wp-site-blocks > footer { margin-block-start: 0 !important; }
.has-text-align-center { text-align: center; }

/* ---------- Header fijo ---------- */
header.wp-block-template-part { position: sticky; top: 0; z-index: 100; }
.admin-bar header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar header.wp-block-template-part { top: 0; } }
.st-header {
	background: rgba(241, 235, 223, .94);
	backdrop-filter: saturate(140%) blur(8px);
	-webkit-backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid rgba(34, 67, 106, .08);
	padding: .7rem var(--wp--style--root--padding-right, 1.25rem) .7rem var(--wp--style--root--padding-left, 1.25rem);
}
.st-header .wp-block-site-logo img { width: 150px; height: auto; }
.st-header .wp-block-navigation { font-weight: 700; font-size: .98rem; color: var(--st-navy); gap: 1.6rem; }
.st-header .wp-block-navigation a:hover { color: var(--st-petroleo); }
.st-header .wp-block-button__link { padding: .7em 1.3em; font-size: .95rem; }
@media (max-width: 781px) {
	.st-header .wp-block-site-logo img { width: 118px; }
	.st-header .st-header__cta { display: none; }
}

/* ---------- Secciones ---------- */
.st-main > * { margin-block-start: 0 !important; }
.st-section { padding-top: var(--st-pad); padding-bottom: var(--st-pad); }
.st-bg-crema { background: var(--st-crema); }
.st-bg-hielo { background: var(--st-hielo); }
.st-bg-navy { background: var(--st-navy); color: #fff; }
.st-bg-navy h2, .st-bg-navy h3 { color: #fff; }
.st-eyebrow {
	text-transform: uppercase; letter-spacing: .14em; font-size: .8rem;
	font-weight: 800; color: var(--st-petroleo); margin-bottom: .4rem;
}
.st-bg-navy .st-eyebrow { color: var(--st-agua); }
.st-center { text-align: center; }
.st-lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; }
.st-intro { max-width: 720px; margin-left: auto !important; margin-right: auto !important; }

/* ---------- Hero ---------- */
.st-hero {
	background: linear-gradient(112deg, var(--st-crema) 0 57%, var(--st-hielo) 57% 100%);
	padding-top: clamp(2.5rem, 6vw, 5rem);
	padding-bottom: clamp(3rem, 7vw, 6rem);
	overflow: hidden;
}
.st-bar { border-left: 10px solid var(--st-acento); padding-left: .45em; margin-left: -.1em; }
.st-hero .st-lead { font-weight: 600; color: var(--wp--preset--color--contrast); }
.st-hero__img img, .st-img-round img {
	border-radius: var(--st-radius); box-shadow: var(--st-shadow);
	width: 100%; height: auto; object-fit: cover;
}
.st-hero__img img { aspect-ratio: 4 / 5; }
@media (max-width: 781px) {
	.st-hero { background: var(--st-crema); }
	.st-hero__img img { aspect-ratio: 4 / 3; }
}
.st-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.st-chips li {
	background: #fff; border: 1px solid rgba(34, 67, 106, .12); border-radius: 999px;
	padding: .4em .95em .4em .8em; font-size: .92rem; font-weight: 700; color: var(--st-navy);
}
.st-chips li::before { content: "✓"; color: var(--st-petroleo); margin-right: .45em; font-weight: 900; }

/* ---------- Botones ---------- */
.st-btn-wa .wp-block-button__link { background: var(--st-wa); color: #0B2B19; }
.st-btn-wa .wp-block-button__link:hover { background: #1EBE5A; color: #0B2B19; }
.st-btn-wa .wp-block-button__link::before {
	content: ""; display: inline-block; width: 1.15em; height: 1.15em; margin-right: .5em; vertical-align: -.2em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C8.8 3 3 8.7 3 15.8c0 2.5.7 4.9 2 7L3 29l6.4-2c2 1.1 4.3 1.7 6.6 1.7 7.2 0 13-5.7 13-12.8S23.2 3 16 3zm6 15.4c-.3-.2-1.9-.9-2.2-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-.3-.2-1.4-.5-2.6-1.6-1-.9-1.6-1.9-1.8-2.2-.2-.3 0-.5.1-.7l.5-.6c.2-.2.2-.3.3-.6.1-.2 0-.4 0-.6l-1-2.4c-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4-.3.3-1.2 1.1-1.2 2.7s1.2 3.2 1.4 3.4c.2.2 2.4 3.6 5.8 5 2 .8 2.8.9 4 .6.6-.1 1.9-.8 2.2-1.5.3-.7.3-1.4.2-1.5-.1-.2-.3-.3-.6-.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C8.8 3 3 8.7 3 15.8c0 2.5.7 4.9 2 7L3 29l6.4-2c2 1.1 4.3 1.7 6.6 1.7 7.2 0 13-5.7 13-12.8S23.2 3 16 3zm6 15.4c-.3-.2-1.9-.9-2.2-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-.3-.2-1.4-.5-2.6-1.6-1-.9-1.6-1.9-1.8-2.2-.2-.3 0-.5.1-.7l.5-.6c.2-.2.2-.3.3-.6.1-.2 0-.4 0-.6l-1-2.4c-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4-.3.3-1.2 1.1-1.2 2.7s1.2 3.2 1.4 3.4c.2.2 2.4 3.6 5.8 5 2 .8 2.8.9 4 .6.6-.1 1.9-.8 2.2-1.5.3-.7.3-1.4.2-1.5-.1-.2-.3-.3-.6-.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.st-btn-outline .wp-block-button__link {
	background: transparent; color: var(--st-navy); box-shadow: inset 0 0 0 2px var(--st-navy);
}
.st-btn-outline .wp-block-button__link:hover { background: var(--st-navy); color: #fff; }
.st-bg-navy .st-btn-outline .wp-block-button__link,
.wp-block-cover .st-btn-outline .wp-block-button__link { color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.st-bg-navy .st-btn-outline .wp-block-button__link:hover,
.wp-block-cover .st-btn-outline .wp-block-button__link:hover { background: #fff; color: var(--st-navy); }
.st-btn-acento .wp-block-button__link { background: var(--st-acento); color: #fff; }
.st-btn-acento .wp-block-button__link:hover { background: #C44A1F; color: #fff; }
.st-link-wa {
	display: inline-block; background: var(--st-wa); color: #0B2B19 !important; font-weight: 800;
	padding: .8em 1.4em; border-radius: 999px; text-decoration: none;
}

/* ---------- Beneficios ---------- */
.st-beneficios .wp-block-column {
	background: #fff; border-radius: var(--st-radius); padding: 1.6rem 1.4rem;
	border-top: 4px solid var(--st-agua); box-shadow: 0 6px 20px rgba(34, 67, 106, .06);
}
.st-beneficios h3 { font-size: 1.3rem; margin-bottom: .3rem; }
.st-beneficios p { margin-top: .3rem; font-size: .98rem; }

/* ---------- Productos ---------- */
.st-cards { gap: 1.5rem; }
.st-card {
	background: #fff; border-radius: var(--st-radius); overflow: hidden;
	box-shadow: 0 8px 26px rgba(34, 67, 106, .08); transition: transform .25s ease, box-shadow .25s ease;
	display: flex; flex-direction: column;
}
.st-card:hover { transform: translateY(-4px); box-shadow: var(--st-shadow); }
.st-card > .wp-block-image { margin: 0; }
.st-card > .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.st-card__body { padding: 1.2rem 1.4rem 1.5rem; }
.st-card__body h3 { margin: 0 0 .4rem; }
.st-card__body p { margin: 0 0 .6rem; font-size: .97rem; }
.st-card__body .st-card__link a { font-weight: 800; text-decoration: none; }

/* ---------- Banda ---------- */
.st-banda h2 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); }

/* ---------- Antes y después ---------- */
.st-video video { border-radius: var(--st-radius); box-shadow: var(--st-shadow); width: 100%; max-height: 620px; object-fit: contain; background: #000; }

/* ---------- Galería ---------- */
.st-galeria.wp-block-gallery { gap: 1rem; }
.st-galeria .wp-block-image img { border-radius: 12px; aspect-ratio: 1 / 1; object-fit: cover; }

/* ---------- Pasos ---------- */
.st-pasos { counter-reset: paso; }
.st-pasos .wp-block-column { counter-increment: paso; position: relative; padding-top: 3.6rem; }
.st-pasos .wp-block-column::before {
	content: counter(paso); position: absolute; top: 0; left: 0;
	width: 2.8rem; height: 2.8rem; border-radius: 50%;
	background: var(--st-navy); color: #fff; font-weight: 900; font-size: 1.2rem;
	display: grid; place-items: center;
}
.st-pasos h3 { font-size: 1.2rem; margin-bottom: .3rem; }
.st-pasos p { margin-top: .3rem; font-size: .97rem; }

/* ---------- Formulario ---------- */
.st-form-card { background: #fff; border-radius: var(--st-radius); padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: var(--st-shadow); }
.st-check { list-style: none; padding: 0; }
.st-check li { padding-left: 1.6em; position: relative; margin-bottom: .45rem; }
.st-check li::before { content: "✓"; position: absolute; left: 0; color: var(--st-petroleo); font-weight: 900; }
.wpcf7 form.st-form { display: grid; gap: 1rem; }
.st-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.st-form-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .st-form-grid, .st-form-grid--3 { grid-template-columns: 1fr; } }
.st-field { display: block; font-weight: 700; font-size: .92rem; color: var(--st-navy); }
.st-field br { display: none; }
fieldset.st-field { border: 0; padding: 0; margin: 0; }
fieldset.st-field legend { padding: 0; margin-bottom: .4rem; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"],
.wpcf7 select, .wpcf7 textarea {
	width: 100%; margin-top: .35rem; padding: .8em .95em; font: inherit; font-weight: 500; color: var(--wp--preset--color--contrast);
	border: 1.5px solid #CBD5DD; border-radius: 10px; background: #FBFCFD; box-sizing: border-box;
}
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus {
	outline: none; border-color: var(--st-petroleo); box-shadow: 0 0 0 3px rgba(11, 126, 138, .18); background: #fff;
}
.wpcf7 input[type="file"] { margin-top: .35rem; font-size: .85rem; width: 100%; }
.wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: .5rem; }
.wpcf7-checkbox .wpcf7-list-item { margin: 0; }
.wpcf7-checkbox label {
	display: inline-flex; align-items: center; gap: .4em; cursor: pointer;
	border: 1.5px solid #CBD5DD; border-radius: 999px; padding: .45em .9em; font-weight: 600; font-size: .9rem; color: var(--st-navy);
}
.wpcf7-checkbox input:checked + span { color: var(--st-petroleo); }
.wpcf7 input.st-submit {
	width: 100%; border: 0; cursor: pointer; border-radius: 999px; padding: 1em 1.4em;
	background: var(--st-acento); color: #fff; font: inherit; font-weight: 900; font-size: 1.05rem;
}
.wpcf7 input.st-submit:hover { background: #C44A1F; }
.wpcf7-spinner { display: block; margin: .5rem auto 0; }
.st-form-nota { font-size: .85rem; color: #5A6672; margin: 0; }
.wpcf7 form .wpcf7-response-output { border-radius: 10px; margin: 0; }

/* ---------- FAQ ---------- */
.st-faq .wp-block-details {
	background: #fff; border-radius: 12px; padding: 1.1rem 1.3rem; margin-top: .75rem;
	border: 1px solid rgba(34, 67, 106, .1);
}
.st-faq .wp-block-details summary { font-weight: 800; color: var(--st-navy); cursor: pointer; list-style: none; position: relative; padding-right: 2rem; }
.st-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.st-faq .wp-block-details summary::after {
	content: "+"; position: absolute; right: 0; top: -.15em; font-size: 1.5rem; color: var(--st-petroleo); transition: transform .2s;
}
.st-faq .wp-block-details[open] summary::after { transform: rotate(45deg); }
.st-faq .wp-block-details p { margin-top: .7rem; }

/* ---------- Contacto / footer ---------- */
.st-contacto h3 { font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--st-agua); margin-bottom: .3rem; }
.st-contacto p { margin-top: .2rem; }
.st-contacto a, .st-footer a { color: #fff; }
.st-footer { background: #16304E; color: rgba(255, 255, 255, .8); font-size: .9rem; padding: 1.6rem var(--wp--style--root--padding-right, 1.25rem); }
.st-footer p { margin: 0; }
.st-footer .st-credito { opacity: .75; }

/* ---------- WhatsApp flotante y barra móvil ---------- */
.st-wa-float {
	position: fixed; right: 22px; bottom: 22px; z-index: 200; width: 60px; height: 60px; border-radius: 50%;
	background: var(--st-wa); color: #fff; display: grid; place-items: center;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .22); transition: transform .2s;
}
.st-wa-float:hover { transform: scale(1.07); color: #fff; }
.st-mobilebar { display: none; }
@media (max-width: 781px) {
	.st-wa-float { display: none; }
	body { padding-bottom: 68px; }
	.st-mobilebar {
		display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
		padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
		background: #fff; box-shadow: 0 -6px 20px rgba(0, 0, 0, .12);
	}
	.st-mobilebar a {
		display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 999px;
		font-weight: 800; text-decoration: none; font-size: .98rem;
	}
	.st-mobilebar__wa { background: var(--st-wa); color: #0B2B19; }
	.st-mobilebar__form { background: var(--st-navy); color: #fff; }
}