/* ============================================================
   GHB SAFE FSE - estilos de componentes
   Complementa a theme.json. Colores via variables --wp--preset--color--*
   ============================================================ */

:root {
	--ts-primary: var(--wp--preset--color--primary, #F47A20);
	--ts-primary-dark: var(--wp--preset--color--primary-dark, #D8631A);
	--ts-secondary: var(--wp--preset--color--secondary, #23262B);
	--ts-muted: var(--wp--preset--color--muted, #6B7280);
	--ts-border: var(--wp--preset--color--border, #E2E6EC);
	--ts-shadow: 0 10px 30px rgba(14,23,38,.10);
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
.ghbsafe-main :where(.alignfull) { scroll-margin-top: 120px; }

/* ---------- HEADER ---------- */
.ghbsafe-header { position: sticky; top: 0; z-index: 999; box-shadow: 0 2px 14px rgba(14,23,38,.06); }
.ghbsafe-topbar { font-size: .82rem; }
.ghbsafe-topbar a { color: #fff; text-decoration: none; }
.ghbsafe-topbar a:hover { color: var(--ts-primary); }
.ghbsafe-topbar-row { gap: 1.2rem; }
.ghbsafe-tagline { margin: 0; opacity: .92; }
.ghbsafe-topbar-email { margin: 0; white-space: nowrap; }
.ghbsafe-topbar-search .wp-block-search__input { background:#fff; border:0; border-radius:6px; padding:.35rem .6rem; font-size:.82rem; }
.ghbsafe-topbar-search .wp-block-search__button { background: var(--ts-primary); border:0; }

.ghbsafe-navbar { transition: padding .25s ease; }
.ghbsafe-header.is-stuck .ghbsafe-navbar { padding-top:.35rem !important; padding-bottom:.35rem !important; }
.ghbsafe-header.is-stuck .ghbsafe-topbar { display:none; }
.ghbsafe-logo { margin:0; }
.ghbsafe-logo img { display:block; height:auto; }
.ghbsafe-navbar-row { gap:1rem; }
.ghbsafe-nav-wrap { gap:1.2rem; }

/* nav links */
.ghbsafe-menu .wp-block-navigation-item__content { color: var(--ts-secondary); font-weight:600; padding:.4rem .1rem; position:relative; }
.ghbsafe-menu .wp-block-navigation-item__content:hover { color: var(--ts-primary); }
.ghbsafe-menu .current-menu-item > .wp-block-navigation-item__content { color: var(--ts-primary); }
.ghbsafe-menu .wp-block-navigation__submenu-container { box-shadow: var(--ts-shadow); border:0; border-radius:8px; padding:.3rem 0; }
.ghbsafe-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-weight:500; }

/* COTIZAR button in header */
.ghbsafe-cotizar-wrap { margin:0; }
.ghbsafe-cotizar .wp-block-button__link { box-shadow:0 6px 16px rgba(244,122,32,.35); }

/* ---------- HERO / COVERS ---------- */
.ghbsafe-hero h1 { text-shadow:0 2px 18px rgba(0,0,0,.25); }
.wp-block-cover.ghbsafe-hero { align-items:center; }

/* ---------- SECTION HELPERS ---------- */
.ghbsafe-eyebrow { margin-bottom:.2rem; }
.ghbsafe-quote { max-width:760px; margin-left:auto; margin-right:auto; }

/* ---------- SERVICE CARDS (home) ---------- */
.ghbsafe-service-cards { gap:1.5rem; }
.ghbsafe-card { background:#fff; border:1px solid var(--ts-border); border-radius:12px; padding:1rem; box-shadow:0 6px 18px rgba(14,23,38,.06); transition:transform .25s ease, box-shadow .25s ease; }
.ghbsafe-card:hover { transform:translateY(-6px); box-shadow:0 16px 36px rgba(14,23,38,.14); }
.ghbsafe-card-img img { width:100%; aspect-ratio:3/4; object-fit:cover; }
.ghbsafe-card h3 { margin:.8rem 0 .3rem; }
.ghbsafe-card h3 a { color:var(--ts-secondary); text-decoration:none; }
.ghbsafe-card:hover h3 a { color:var(--ts-primary); }

/* ---------- PRODUCT ROWS ---------- */
.ghbsafe-product-row { gap:2.5rem; }
.ghbsafe-check-list { list-style:none; margin:1rem 0; padding:0; }
.ghbsafe-check-list li { position:relative; padding-left:1.9rem; margin-bottom:.55rem; }
.ghbsafe-check-list li::before { content:"✓"; position:absolute; left:0; top:0; width:1.3rem; height:1.3rem; line-height:1.3rem; text-align:center; font-size:.8rem; font-weight:700; color:#fff; background:var(--ts-primary); border-radius:50%; }

/* ---------- GALLERIES ---------- */
.ghbsafe-gallery img { width:100%; height:100%; object-fit:cover; }
.ghbsafe-gallery.columns-2 figure.wp-block-image { aspect-ratio:4/3; }

/* ---------- CONTACT ---------- */
.ghbsafe-contact-list { list-style:none; margin:1rem 0; padding:0; line-height:2; }
.ghbsafe-contact-list a { text-decoration:none; color:var(--ts-secondary); }
.ghbsafe-contact-list a:hover { color:var(--ts-primary); }
.ghbsafe-map iframe { display:block; width:100%; min-height:430px; }

/* ---------- WHATSAPP BUTTON style ---------- */
.ghbsafe-wa .wp-block-button__link:hover { filter:brightness(.94); }

/* ---------- FOOTER ---------- */
.ghbsafe-footer a { color:rgba(255,255,255,.85); text-decoration:none; }
.ghbsafe-footer a:hover { color:var(--ts-primary); }
.ghbsafe-footer-title { position:relative; padding-bottom:.5rem; margin-bottom:1rem; }
.ghbsafe-footer-title::after { content:""; position:absolute; left:0; bottom:0; width:42px; height:3px; background:var(--ts-primary); border-radius:2px; }
.ghbsafe-footer-links { list-style:none; margin:0; padding:0; line-height:2.1; }
.ghbsafe-footer-bottom { font-size:.8rem; }
.ghbsafe-footer-bottom p { margin:0; }
.ghbsafe-credit a { color:var(--ts-primary); }

/* ---------- FLOATING BUTTONS ---------- */
.ghbsafe-fab { position:fixed; right:18px; z-index:990; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 8px 22px rgba(0,0,0,.22); cursor:pointer; border:0; transition:transform .2s ease, opacity .2s ease; text-decoration:none; }
.ghbsafe-fab:hover { transform:scale(1.08); color:#fff; }
.ghbsafe-fab--wa { bottom:84px; background:#25D366; font-size:26px; }
.ghbsafe-fab--top { bottom:20px; background:var(--ts-secondary); font-size:22px; opacity:0; pointer-events:none; }
.ghbsafe-fab--top.is-visible { opacity:1; pointer-events:auto; }

/* ---------- MODAL (popup cotizar) ---------- */
.ghbsafe-modal[hidden] { display:none; }
.ghbsafe-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:1rem; }
.ghbsafe-modal__overlay { position:absolute; inset:0; background:rgba(14,23,38,.62); backdrop-filter:blur(2px); animation:tsFade .25s ease; }
.ghbsafe-modal__dialog { position:relative; width:100%; max-width:480px; max-height:92vh; overflow:auto; background:#fff; border-radius:14px; padding:2rem 1.8rem 1.8rem; box-shadow:0 30px 80px rgba(0,0,0,.4); animation:tsPop .3s cubic-bezier(.2,.8,.25,1); }
.ghbsafe-modal__logo { display:block; max-width:160px; margin:0 auto .4rem; }
.ghbsafe-modal__dialog h3 { text-align:center; margin:.2rem 0 1.1rem; color:var(--ts-secondary); }
.ghbsafe-modal__close { position:absolute; top:.6rem; right:.8rem; background:none; border:0; font-size:1.8rem; line-height:1; color:var(--ts-muted); cursor:pointer; }
.ghbsafe-modal__close:hover { color:var(--ts-primary); }
@keyframes tsFade { from{opacity:0} to{opacity:1} }
@keyframes tsPop { from{opacity:0; transform:translateY(18px) scale(.97)} to{opacity:1; transform:none} }

/* ---------- QUOTE FORM ---------- */
.ghbsafe-quote-form label { display:block; font-size:.82rem; font-weight:600; color:var(--ts-secondary); margin-bottom:.7rem; }
.ghbsafe-quote-form input,
.ghbsafe-quote-form select,
.ghbsafe-quote-form textarea { width:100%; margin-top:.25rem; padding:.6rem .7rem; border:1px solid var(--ts-border); border-radius:7px; font:inherit; font-weight:400; background:#fff; }
.ghbsafe-quote-form input:focus,
.ghbsafe-quote-form select:focus,
.ghbsafe-quote-form textarea:focus { outline:none; border-color:var(--ts-primary); box-shadow:0 0 0 3px rgba(244,122,32,.15); }
.ghbsafe-quote-form .tqf-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.tqf-submit { width:100%; margin-top:.4rem; padding:.85rem; border:0; border-radius:7px; background:var(--ts-primary); color:#fff; font-weight:700; text-transform:uppercase; letter-spacing:.4px; cursor:pointer; transition:background .2s ease; }
.tqf-submit:hover { background:var(--ts-primary-dark); }
.ghbsafe-quote-ok { background:#e7f7ec; border:1px solid #b7e3c4; color:#1c7a3e; padding:.7rem .9rem; border-radius:7px; margin-bottom:1rem; font-size:.9rem; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
	.ghbsafe-tagline { display:none; }
}
@media (max-width:781px){
	.ghbsafe-topbar { display:none; }
	.ghbsafe-navbar-row { gap:.6rem; }
	.ghbsafe-nav-wrap { gap:.6rem; }
	.ghbsafe-service-cards { gap:1rem; }
	.ghbsafe-quote-form .tqf-grid { grid-template-columns:1fr; }
	.ghbsafe-product-row { gap:1.2rem; }
}
@media (max-width:600px){
	.ghbsafe-card-img img { aspect-ratio:1/1; }
}

/* ---------- FAQ (details) ---------- */
.ghbsafe-faq { border:1px solid var(--ts-border); border-radius:8px; margin-bottom:.6rem; background:#fff; }
.ghbsafe-faq summary { cursor:pointer; padding:.9rem 2.4rem .9rem 1.1rem; font-family:'Oswald',sans-serif; font-weight:500; color:var(--ts-secondary); list-style:none; position:relative; }
.ghbsafe-faq summary::-webkit-details-marker { display:none; }
.ghbsafe-faq summary::after { content:"+"; position:absolute; right:1.1rem; top:.7rem; color:var(--ts-primary); font-size:1.5rem; line-height:1; }
.ghbsafe-faq[open] summary::after { content:"\2013"; }
.ghbsafe-faq p { padding:0 1.1rem 1rem; margin:0; color:var(--ts-muted); }

/* ---------- Highlight (ventaja/garantia/resultado) ---------- */
.ghbsafe-highlight { border-radius:0 8px 8px 0; }

.ghbsafe-faq__a { padding:0 1.1rem 1rem; }
.ghbsafe-faq__a p { padding:0; margin:0; color:var(--ts-muted); }

/* ---- Logo (bloque HTML) + boton cotizar sin quiebre ---- */
.ghbsafe-logo img { width:150px; height:auto; display:block; }
.ghbsafe-footer-logo img { width:170px; height:auto; display:block; }
.ghbsafe-cotizar-wrap, .ghbsafe-nav-wrap { flex-shrink:0; }
.ghbsafe-cotizar .wp-block-button__link { white-space:nowrap; }
.ghbsafe-navbar-row { flex-wrap:wrap; gap:.8rem; }