/* ==========================================================================
   Settemari Ponza — Google Ads landing (Palmarola)
   Builds on style.css (brand variables, .btn, .container).
   ========================================================================== */

:root { --wa: #25D366; --call: #F80000; }

/* Same editorial language as the home: serif (Fraunces) headings inherited from
   style.css, eyebrow "— Label", sand sections. Conversion structure unchanged. */
.lp h1, .lp h2, .lp h3 { font-weight: 400; }

.lp { padding-bottom: 0; }
.lp .container.narrow { max-width: 820px; }
.center { text-align: center; }
.muted { color: #8a8f96; font-size: .9rem; }

/* CTA buttons */
.btn-call { background: var(--call); color: #fff; box-shadow: 0 8px 20px rgba(248,0,0,.32); }
.btn-call:hover { color: #fff; transform: translateY(-2px); }
.btn-wa { background: var(--wa); color: #fff; box-shadow: 0 8px 20px rgba(37,211,102,.32); }
.btn-wa:hover { color: #fff; transform: translateY(-2px); }
.btn-sm { padding: 9px 16px; font-size: .92rem; }
.btn-ghost { background: transparent; color: var(--navy); border: 2px solid #cdd6e4; }
.btn-ghost:hover { background: #eef2f8; color: var(--navy); }
.btn .ic { vertical-align: -4px; margin-right: 8px; }
.btn-sm .ic { margin-right: 6px; }

/* ---- Header (minimal, no nav) ------------------------------------------ */
.lp-header { position: sticky; top: 0; z-index: 90; background: #fff; box-shadow: 0 2px 12px rgba(12,45,109,.08); }
.lp-header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 70px; }
.lp-header .logo img { width: 190px; height: auto; }

/* ---- Hero (editorial, left-aligned like the home) ---------------------- */
.lp-hero { background-size: cover; background-position: center; color: #fff; text-align: left; padding: 104px 0 112px; }
.lp-hero-inner { max-width: 780px; }
.lp-eyebrow { text-transform: uppercase; letter-spacing: .24em; font-size: .78rem; font-weight: 600; color: #fff; opacity: .95; margin: 0 0 20px; }
.lp-eyebrow::before { content: "— "; }
.lp-hero h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.7rem); font-weight: 400; letter-spacing: -.015em; text-shadow: 0 2px 26px rgba(0,0,0,.32); margin-bottom: .38em; }
.lp-sub { font-size: clamp(1.05rem, 2.1vw, 1.35rem); font-weight: 300; margin: 0 0 2.1em; max-width: 560px; text-shadow: 0 2px 14px rgba(0,0,0,.34); }
.lp-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.lp-hero .lp-cta { justify-content: flex-start; } /* hero left-aligned; other CTA blocks stay centered */
.lp-reassure { margin-top: 18px; font-size: .92rem; opacity: .92; }

/* ---- Trust bar ---------------------------------------------------------- */
.lp-trust { background: var(--navy); color: #fff; }
.lp-trust ul { list-style: none; margin: 0; padding: 18px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 38px; }
.lp-trust li { display: flex; align-items: center; gap: 9px; font-weight: 500; }
.lp-trust .ic { color: var(--cyan); }

/* ---- Social proof strip (TripAdvisor) ---------------------------------- */
.lp-reviews { background: #fff; border-bottom: 1px solid var(--line); text-align: center; padding: 14px 16px; }
.lp-reviews a { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; color: var(--navy); font-size: .92rem; }
.lp-reviews a:hover { color: var(--navy); }
.lp-reviews .lp-rev-stars { color: #f5a623; letter-spacing: 1px; }
.lp-reviews strong { font-size: 1.05rem; }
.lp-reviews em { font-style: normal; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--red); font-weight: 600; }

/* ---- Sections ----------------------------------------------------------- */
.lp-section { padding: 104px 0; }
.lp-alt { background: var(--sand); }
.lp-section h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom: .5em; }
.lp-lead { font-size: 1.08rem; margin-bottom: 1.8em; }

/* Timeline */
.lp-timeline { list-style: none; margin: 0; padding: 0; border-left: 3px solid var(--cyan); }
.lp-timeline li { position: relative; padding: 0 0 26px 26px; }
.lp-timeline li::before { content: ""; position: absolute; left: -9px; top: 4px; width: 15px; height: 15px; border-radius: 50%; background: var(--red); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--cyan); }
.lp-time { display: block; font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.lp-step { display: block; color: var(--text); }

/* Gallery */
.lp-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
.lp-gallery figure { margin: 0; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4/3; }
.lp-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.lp-gallery figure:hover img { transform: scale(1.05); }

/* FAQ */
.lp-faq details { background: #fff; border: 1px solid #e6edf6; border-radius: 12px; padding: 4px 20px; margin-bottom: 12px; box-shadow: 0 4px 14px rgba(12,45,109,.06); }
.lp-faq summary { cursor: pointer; font-weight: 600; color: var(--navy); padding: 14px 0; list-style: none; position: relative; padding-right: 28px; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 1.4rem; color: var(--red); line-height: 1; }
.lp-faq details[open] summary::after { content: "\2212"; }
.lp-faq p { margin: 0 0 16px; }

/* Final CTA band */
.lp-cta-band { background: linear-gradient(135deg, var(--navy), #14418f); color: #fff; padding: 96px 0; text-align: center; }
.lp-cta-band .eyebrow { color: var(--cyan); }
.lp-cta-band h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.lp-cta-band p { margin: 0 auto 1.6em; max-width: 560px; opacity: .95; }

/* Footer */
.lp-footer { background: #0a224f; color: #fff; padding: 26px 0; font-size: .9rem; }
.lp-footer-inner { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lp-footer a { color: var(--cyan); }
.lp-footer p { margin: 4px 0; opacity: .92; }

/* Legal page */
.legal { padding: 50px 0 80px; }
.legal h1 { margin-bottom: .2em; }
.legal h2 { font-size: 1.25rem; margin-top: 1.6em; }

/* ---- Sticky mobile CTA -------------------------------------------------- */
.lp-sticky { display: none; }
@media (max-width: 760px) {
	.lp-sticky {
		display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		background: rgba(255,255,255,.97); box-shadow: 0 -4px 18px rgba(12,45,109,.16);
	}
	.lp-sticky .btn { padding: 13px 10px; font-size: .98rem; }
	main { padding-bottom: 78px; }
	.lp-header .btn-call { display: none; }
}

/* ---- Cookie banner ------------------------------------------------------ */
.cookie-banner {
	position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 120;
	max-width: 560px; margin: 0 auto;
	background: #fff; border-radius: 14px; padding: 18px 20px;
	box-shadow: 0 14px 40px rgba(12,45,109,.28);
	display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.cookie-text { margin: 0; font-size: .9rem; flex: 1 1 240px; color: var(--text); }
.cookie-text a { color: var(--navy); text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; margin-left: auto; }
.cookie-actions .btn { padding: 10px 20px; font-size: .92rem; }
@media (max-width: 760px) {
	.cookie-banner { bottom: 86px; }
	.cookie-actions { width: 100%; }
	.cookie-actions .btn { flex: 1; }
}

/* Responsive */
@media (max-width: 760px) {
	.lp-gallery { grid-template-columns: 1fr 1fr; }
	.lp-hero { padding: 64px 0 72px; }
	.lp-section { padding: 52px 0; }
}