:root {
  --petrol: #073f48;
  --petrol-deep: #042f36;
  --petrol-soft: #0b5961;
  --green: #58ad58;
  --green-dark: #328245;
  --mint: #dcebdc;
  --ivory: #f6f3ed;
  --white: #fff;
  --ink: #112f35;
  --muted: #60767b;
  --line: #dce5e2;
  --shadow: 0 20px 50px rgba(7, 63, 72, .1);
  --radius: 24px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--ivory); font-family: "DM Sans", sans-serif; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, a { -webkit-tap-highlight-color: transparent; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(17,47,53,.08); backdrop-filter: blur(16px); }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-logo { width: 160px; height: auto; object-fit: contain; }
.main-nav { display: flex; align-items: center; gap: 32px; font-weight: 600; font-size: 14px; }
.header-inner--localized { gap: 20px; }
.header-inner--localized .main-nav { gap: 20px; }
.main-nav > a:not(.nav-cta) { position: relative; }
.main-nav > a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; bottom: -7px; width: 0; height: 2px; background: var(--green); transition: width .25s ease; }
.main-nav > a:hover::after { width: 100%; }
.main-nav > a.active::after { width: 100%; }
.nav-cta { background: var(--petrol); color: white; padding: 13px 20px; border-radius: 999px; }
.language-switcher { position: relative; flex: 0 0 auto; }
.language-switcher-toggle { min-height: 40px; padding: 8px 10px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: var(--petrol); background: rgba(255,255,255,.88); border: 1px solid rgba(7,63,72,.16); border-radius: 999px; cursor: pointer; font: 700 12px/1 "Manrope", sans-serif; letter-spacing: .05em; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.language-switcher-toggle:hover { background: white; border-color: rgba(50,130,69,.45); }
.language-switcher-current { display: inline-flex; align-items: center; gap: 7px; }
.language-switcher-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.language-switcher-toggle .language-switcher-chevron { width: 13px; height: 13px; transition: transform .2s ease; }
.language-switcher-toggle[aria-expanded="true"] .language-switcher-chevron { transform: rotate(180deg); }
.language-switcher-menu { position: absolute; z-index: 5; top: calc(100% + 10px); right: 0; min-width: 172px; padding: 7px; background: white; border: 1px solid rgba(7,63,72,.11); border-radius: 14px; box-shadow: 0 18px 42px rgba(7,63,72,.16); }
.language-switcher-menu[hidden] { display: none; }
.language-switcher-option { min-height: 42px; padding: 10px 11px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--ink); border-radius: 9px; font-size: 14px; line-height: 1.2; }
.language-switcher-option:hover, .language-switcher-option[aria-current="page"] { color: var(--petrol); background: rgba(88,173,88,.1); }
.language-switcher-check { color: var(--green-dark); font-weight: 800; }
.language-switcher-toggle:focus-visible, .language-switcher-option:focus-visible { outline: 3px solid rgba(50,130,69,.25); outline-offset: 3px; }
.menu-toggle { display: none; border: 0; padding: 8px; background: transparent; }
.menu-toggle span { display: block; width: 27px; height: 2px; margin: 6px 0; background: var(--petrol); transition: .25s ease; }

.hero { min-height: 680px; position: relative; display: grid; align-items: center; overflow: hidden; color: white; background: var(--petrol-deep); }
.hero-media { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,36,42,.98) 0%, rgba(2,36,42,.79) 43%, rgba(2,36,42,.17) 77%), url("assets/hero-ecohost.webp") center/cover no-repeat; transform: scale(1.01); }
.hero-pattern { position: absolute; left: -6%; right: -5%; bottom: -60px; height: 190px; opacity: .28; background: repeating-radial-gradient(ellipse at 50% 110%, transparent 0 21px, rgba(88,173,88,.34) 22px 23px, transparent 24px 38px); transform: rotate(-2deg); }
.hero-content { position: relative; z-index: 2; padding-block: 112px 130px; }
.eyebrow { margin: 0 0 18px; color: var(--green-dark); font: 700 12px/1.2 "Manrope", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { content: ""; display: inline-block; width: 28px; height: 2px; margin: 0 10px 4px 0; background: currentColor; }
.eyebrow.light { color: #9ad899; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Manrope", sans-serif; }
h1 { max-width: 690px; margin-bottom: 24px; font-size: clamp(48px, 6vw, 78px); line-height: .99; letter-spacing: -.05em; }
h1 span { color: #7dcc77; }
.hero-copy { max-width: 570px; margin-bottom: 35px; color: rgba(255,255,255,.82); font-size: 18px; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 30px; }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 23px; border-radius: 13px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button svg, .text-link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; }
.button-primary { color: white; background: linear-gradient(135deg, var(--green), #3d9b50); box-shadow: 0 13px 28px rgba(45,143,69,.24); }
.button-primary:hover { box-shadow: 0 17px 36px rgba(45,143,69,.34); }
.text-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--petrol); }
.light-link { color: white; }

.breadcrumb { padding-top: 18px; color: var(--muted); }
.breadcrumb ol { min-width: 0; margin: 0 auto; padding-left: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; list-style: none; font-size: 12px; line-height: 1.45; }
.breadcrumb li { min-width: 0; display: inline-flex; align-items: center; gap: 7px; }
.breadcrumb-separator { width: 14px; height: 14px; flex: 0 0 auto; color: rgba(17,47,53,.35); }
.breadcrumb a { color: var(--green-dark); font-weight: 600; }
.breadcrumb a:hover { color: var(--petrol); }
.breadcrumb [aria-current="page"] { color: var(--petrol); font-weight: 600; }

.trust-bar { position: relative; z-index: 3; margin-top: -54px; }
.trust-grid { min-height: 108px; padding: 22px 30px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; background: var(--petrol); color: white; border-radius: 22px; box-shadow: 0 18px 44px rgba(2,38,44,.25); }
.trust-grid article { min-width: 0; padding: 0 20px; display: flex; align-items: center; gap: 14px; border-right: 1px solid rgba(255,255,255,.15); }
.trust-grid article:last-child { border-right: 0; }
.icon-badge { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(125,204,119,.55); border-radius: 50%; background: rgba(125,204,119,.08); }
.icon-badge svg, .feature-icon svg, .step-icon svg { width: 24px; height: 24px; fill: none; stroke: #77cc73; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.trust-grid strong, .trust-grid small { display: block; }
.trust-grid strong { margin-bottom: 5px; font: 700 16px/1.1 "Manrope", sans-serif; }
.trust-grid small { color: rgba(255,255,255,.68); font-size: 11px; line-height: 1.35; }

.section { padding: 120px 0; }
.section-heading { margin-bottom: 50px; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 80px; }
h2 { margin-bottom: 18px; font-size: clamp(35px, 4vw, 52px); line-height: 1.08; letter-spacing: -.04em; }
.section-heading > p, .process-intro > p { color: var(--muted); line-height: 1.75; }
.solution-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.solution-card { position: relative; min-height: 410px; padding: 32px; display: flex; flex-direction: column; background: white; border: 1px solid rgba(7,63,72,.06); border-radius: var(--radius); box-shadow: 0 14px 34px rgba(7,63,72,.06); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.solution-card:hover { transform: translateY(-7px); border-color: rgba(88,173,88,.35); box-shadow: var(--shadow); }
.card-number { position: absolute; top: 34px; right: 34px; color: #91a3a5; font: 700 11px/1 "Manrope", sans-serif; letter-spacing: .12em; }
.feature-icon { width: 66px; height: 66px; margin-bottom: 38px; display: grid; place-items: center; border-radius: 20px; background: #edf5ed; }
.feature-icon svg { width: 31px; height: 31px; stroke: var(--green-dark); }
.solution-card h3 { margin-bottom: 14px; font-size: 24px; line-height: 1.18; letter-spacing: -.025em; }
.solution-card p { margin-bottom: 28px; color: var(--muted); line-height: 1.65; }
.solution-card a { margin-top: auto; display: flex; align-items: center; justify-content: space-between; color: var(--green-dark); font-weight: 700; }
.solution-card a svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; }

.process { background: white; }
.process-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 100px; }
.process-intro { position: sticky; top: 130px; align-self: start; }
.process-intro .text-link { margin-top: 14px; }
.process-list { margin: 0; padding: 0; list-style: none; }
.process-list li { position: relative; padding: 0 0 58px 92px; display: grid; grid-template-columns: 1fr; }
.process-list li:not(:last-child)::before { content: ""; position: absolute; left: 31px; top: 66px; bottom: 0; width: 1px; background: linear-gradient(var(--green), var(--line)); }
.step-icon { position: absolute; left: 0; top: 0; width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid #cfe1d1; border-radius: 20px; background: #f4f8f3; }
.step-icon svg { stroke: var(--green-dark); }
.process-list small { display: block; margin-bottom: 8px; color: var(--green-dark); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.process-list h3 { margin-bottom: 9px; font-size: 23px; }
.process-list p { max-width: 570px; margin: 0; color: var(--muted); line-height: 1.65; }

.results { background: linear-gradient(180deg, var(--ivory), #eef3ef); }
.installations-heading h2 { max-width: 570px; }
.installations-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.installation-card { min-width: 0; overflow: hidden; display: flex; flex-direction: column; background: white; border: 1px solid rgba(7,63,72,.08); border-radius: 24px; box-shadow: 0 14px 34px rgba(7,63,72,.06); }
.installation-card figure { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: #edf1ed; }
.installation-card img { width: 100%; height: 100%; object-fit: cover; }
.installation-card h3 { margin: 0; padding: 22px 24px 24px; font-size: 18px; line-height: 1.35; }
.installations-action { margin-top: 38px; display: flex; justify-content: center; }
.installations-action .button { min-width: 220px; }

.success-stories { --success-teal: #005a5b; padding: 102px 0 108px; background: #f7f8f7; }
.success-stories > .container { width: min(calc(100% - 48px), 1260px); }
.success-heading { max-width: 880px; margin: 0 auto 48px; text-align: center; }
.success-heading .eyebrow::before { display: none; }
.success-heading h2 { margin-bottom: 20px; font-size: clamp(42px, 3.8vw, 54px); }
.success-heading > p:last-child { max-width: 720px; margin: 0 auto; color: var(--muted); font-size: 18px; line-height: 1.65; }
.success-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 26px; }
.success-card { min-width: 0; min-height: 552px; padding: 38px 36px 34px; display: flex; flex-direction: column; background: white; border: 1px solid rgba(7,63,72,.09); border-radius: 26px; box-shadow: 0 16px 38px rgba(7,63,72,.055); }
.success-card-icon { width: 78px; height: 78px; margin: 0 0 29px; display: grid; place-items: center; color: var(--success-teal); background: #e7f2f1; border-radius: 50%; }
.success-card-icon svg { width: 38px; height: 38px; }
.success-metric { min-height: 116px; text-align: left; }
.success-metric strong, .success-metric span { display: block; }
.success-metric strong { margin-bottom: 10px; color: var(--success-teal); font: 800 62px/.92 "Manrope", sans-serif; letter-spacing: -.06em; }
.success-metric--text strong { max-width: 300px; font-size: 42px; line-height: 1.02; letter-spacing: -.045em; }
.success-metric span { color: #101c2d; font-size: 15px; font-weight: 700; }
.success-card blockquote { margin: 29px 0 30px; padding-top: 27px; color: #17263b; border-top: 1px solid rgba(7,63,72,.12); font-size: 16px; line-height: 1.72; }
.success-client { margin-top: auto; display: flex; align-items: center; gap: 16px; }
.success-avatar { width: 62px; height: 62px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; color: #738589; background: #edf0ef; border: 1px solid rgba(7,63,72,.07); border-radius: 50%; }
.success-avatar svg { width: 29px; height: 29px; }
.success-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.success-client div { min-width: 0; display: flex; flex-direction: column; }
.success-client strong { margin-bottom: 4px; color: #101c2d; font: 700 16px/1.25 "Manrope", sans-serif; }
.success-client span, .success-client small { color: #60718a; font-size: 13px; line-height: 1.45; }
.success-client small { margin-top: 2px; }
.success-cta { margin-top: 58px; padding: 24px 32px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 26px; background: #eef3f3; border: 1px solid rgba(7,63,72,.05); border-radius: 18px; }
.success-cta-icon { width: 70px; height: 70px; display: grid; place-items: center; color: var(--success-teal); background: #e2f0ef; border-radius: 50%; }
.success-cta-icon svg { width: 36px; height: 36px; }
.success-cta h3 { margin-bottom: 7px; color: var(--petrol); font-size: 24px; line-height: 1.25; }
.success-cta p { margin: 0; color: #718097; font-size: 15px; line-height: 1.55; }
.success-cta .button { min-width: 300px; padding-block: 18px; background: var(--success-teal); border-radius: 12px; box-shadow: 0 12px 24px rgba(0,90,91,.18); }
.success-cta .button:hover { box-shadow: 0 16px 30px rgba(0,90,91,.25); }
.success-cta .button svg { width: 19px; height: 19px; }

.cta-section { padding: 100px 0; background: white; }
.cta-card { position: relative; overflow: hidden; padding: 68px; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 70px; color: white; background: linear-gradient(135deg, var(--petrol), #075a61); border-radius: 30px; }
.cta-card::after { content: ""; position: absolute; width: 380px; height: 380px; right: -170px; bottom: -240px; border: 1px solid rgba(125,204,119,.35); border-radius: 50%; box-shadow: 0 0 0 22px rgba(125,204,119,.05), 0 0 0 44px rgba(125,204,119,.04), 0 0 0 66px rgba(125,204,119,.03); }
.cta-card > * { position: relative; z-index: 1; }
.cta-card h2 { margin-bottom: 14px; font-size: 42px; }
.cta-card p:not(.eyebrow) { margin: 0; color: rgba(255,255,255,.75); line-height: 1.6; }
.cta-actions { display: flex; flex-direction: column; align-items: center; gap: 17px; }
.cta-actions .button { width: 100%; }
.cta-actions .button svg { width: 23px; height: 23px; }
.cta-actions > a:last-child { font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }

.site-footer { padding: 55px 0 35px; color: white; background: var(--petrol-deep); }
.footer-inner { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 45px 80px; }
.footer-logo { width: 230px; height: auto; object-fit: contain; }
.footer-links { justify-self: end; display: flex; gap: 32px; color: rgba(255,255,255,.75); font-size: 13px; }
.footer-links a:hover { color: white; }
.footer-inner > small { grid-column: 1 / -1; padding-top: 25px; color: rgba(255,255,255,.48); border-top: 1px solid rgba(255,255,255,.1); }
.floating-contact { position: fixed; z-index: 35; right: 22px; bottom: 22px; width: 54px; height: 54px; display: grid; place-items: center; color: white; background: var(--green-dark); border-radius: 50%; box-shadow: 0 10px 25px rgba(12,72,39,.3); transition: transform .2s ease; }
.floating-contact:hover { transform: translateY(-3px) scale(1.03); }
.floating-contact svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* Sobre nosotros */
.about-page { background: #fbfaf7; }
.about-story { position: relative; padding: 92px 0 80px; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #fbfaf7 100%); }
.about-story::before { content: ""; position: absolute; width: 420px; height: 420px; left: -250px; top: 30px; border: 1px solid rgba(88,173,88,.15); border-radius: 50%; box-shadow: 0 0 0 28px rgba(88,173,88,.025), 0 0 0 56px rgba(88,173,88,.02); }
.story-grid { position: relative; display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 76px; }
.story-copy h1 { margin: 0 0 30px; color: var(--ink); font-size: clamp(48px, 5.3vw, 70px); line-height: 1; }
.story-copy > p:not(.eyebrow) { margin-bottom: 22px; color: var(--muted); font-size: 16px; line-height: 1.78; }
.story-copy blockquote { margin: 38px 0 0; padding-left: 22px; color: var(--petrol); border-left: 3px solid var(--green); font: 700 25px/1.35 "Manrope", sans-serif; letter-spacing: -.03em; }
.story-copy blockquote strong { color: var(--green-dark); }
.story-visual { position: relative; margin: 0; border-radius: 28px; overflow: hidden; box-shadow: 0 25px 65px rgba(7,63,72,.14); }
.story-visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(255,255,255,.45); border-radius: inherit; }
.story-visual img { width: 100%; min-height: 520px; object-fit: cover; object-position: 76% center; }
.story-visual figcaption { position: absolute; right: 20px; bottom: 20px; padding: 12px 16px; display: flex; align-items: center; gap: 9px; color: white; background: rgba(4,47,54,.82); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; backdrop-filter: blur(10px); font-size: 12px; font-weight: 600; }
.story-visual figcaption span { width: 8px; height: 8px; background: #7dcc77; border-radius: 50%; box-shadow: 0 0 0 5px rgba(125,204,119,.15); }

.about-principles { padding: 35px 0 110px; }
.principles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.principle-card { min-height: 290px; padding: 44px; display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 28px; background: white; border: 1px solid rgba(7,63,72,.07); border-radius: 26px; box-shadow: 0 18px 45px rgba(7,63,72,.06); }
.principle-icon { width: 68px; height: 68px; display: grid; place-items: center; color: var(--green-dark); background: #edf5ed; border-radius: 21px; }
.principle-icon svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.principle-card .eyebrow { margin-bottom: 10px; font-size: 9px; }
.principle-card h2 { margin-bottom: 15px; font-size: 31px; }
.principle-card p:last-child { margin: 0; color: var(--muted); line-height: 1.72; }

.about-team { padding: 110px 0 120px; background: white; }
.team-heading { max-width: 650px; margin: 0 auto 55px; text-align: center; }
.team-heading .eyebrow::before { display: none; }
.team-heading h2 { margin-bottom: 16px; }
.team-heading > p:last-child { color: var(--muted); line-height: 1.65; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.team-card { overflow: hidden; background: #fff; border: 1px solid rgba(7,63,72,.08); border-radius: 25px; box-shadow: 0 15px 38px rgba(7,63,72,.075); transition: transform .3s ease, box-shadow .3s ease; }
.team-card:hover { transform: translateY(-7px); box-shadow: 0 24px 50px rgba(7,63,72,.12); }
.team-card-featured { border-color: rgba(88,173,88,.3); }
.team-photo { height: 470px; overflow: hidden; background: #f1f2f0; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .5s ease; }
.team-card:hover .team-photo img { transform: scale(1.025); }
.team-info { padding: 26px 28px 28px; text-align: center; border-top: 1px solid rgba(7,63,72,.06); }
.team-info h3 { margin-bottom: 7px; color: var(--green-dark); font-size: 20px; }
.team-info p { margin: 0; color: var(--muted); font-size: 14px; }

.about-values { padding: 90px 0; background: #f7f6f1; }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.value-item { padding: 4px 32px; text-align: center; border-right: 1px solid rgba(7,63,72,.13); }
.value-item:last-child { border-right: 0; }
.value-item > span { width: 62px; height: 62px; margin: 0 auto 24px; display: grid; place-items: center; color: var(--green-dark); border: 1px solid rgba(50,130,69,.5); border-radius: 50%; background: rgba(255,255,255,.6); }
.value-item svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.value-item h3 { margin-bottom: 12px; font-size: 18px; }
.value-item p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.home-confidence { padding: 76px 0; background: white; }
.home-confidence .value-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; }
.home-confidence .value-item > span { margin: 0 auto 22px; }
.home-confidence .value-item h3 { width: 100%; max-width: 240px; margin: 0 auto 12px; }
.home-confidence .value-item p { width: 100%; max-width: 240px; margin: 0 auto; }
.home-guarantee-reference { padding: 0 0 76px; background: white; }
.home-guarantee-card { padding: 24px 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 0; background: #f7f8f7; border: 1px solid rgba(7,63,72,.08); border-radius: 22px; box-shadow: 0 14px 34px rgba(7,63,72,.055); }
.home-guarantee-benefit { min-width: 0; padding-right: 28px; display: flex; align-items: center; justify-content: center; gap: 15px; }
.home-guarantee-benefit + .home-guarantee-benefit { padding-left: 28px; border-left: 1px solid rgba(7,63,72,.11); }
.home-guarantee-benefit > span { width: 52px; height: 52px; display: grid; place-items: center; color: var(--green-dark); background: #e8f3e8; border-radius: 50%; }
.home-guarantee-benefit > div { min-width: 0; text-align: center; }
.home-guarantee-benefit svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.home-guarantee-benefit h3 { margin-bottom: 5px; color: var(--petrol); font-size: 17px; line-height: 1.3; }
.home-guarantee-benefit p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.home-guarantee-link { min-height: 48px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: var(--petrol); background: white; border: 1px solid rgba(0,90,91,.22); border-radius: 12px; white-space: nowrap; font-weight: 700; transition: color .2s ease, border-color .2s ease, transform .2s ease; }
.home-guarantee-link:hover { color: var(--green-dark); border-color: rgba(50,130,69,.55); transform: translateY(-2px); }
.home-guarantee-link:focus-visible { outline: 3px solid rgba(0,90,91,.18); outline-offset: 3px; }
.home-guarantee-link svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.about-cta { position: relative; overflow: hidden; padding: 94px 0; color: white; background: linear-gradient(135deg, var(--petrol), #075a61); }
.about-cta::before { content: ""; position: absolute; inset: auto -5% -130px; height: 250px; opacity: .23; background: repeating-radial-gradient(ellipse at 50% 110%, transparent 0 21px, rgba(88,173,88,.34) 22px 23px, transparent 24px 38px); }
.about-cta-inner { position: relative; z-index: 1; text-align: center; }
.about-cta .eyebrow::before { display: none; }
.about-cta h2 { margin-bottom: 14px; font-size: clamp(38px, 4vw, 52px); }
.about-cta p:not(.eyebrow) { margin-bottom: 30px; color: rgba(255,255,255,.75); font-size: 17px; }
.about-cta .button { min-width: 290px; }

@media (max-width: 980px) {
  .main-nav { position: fixed; inset: 82px 0 auto 0; height: calc(100vh - 82px); padding: 45px 24px; flex-direction: column; align-items: stretch; gap: 12px; overflow-y: auto; overscroll-behavior: contain; background: white; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease, visibility .25s ease; }
  .main-nav.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .main-nav a { padding: 16px 6px; font-size: 18px; border-bottom: 1px solid var(--line); }
  .main-nav .nav-cta { margin-top: 14px; text-align: center; border: 0; }
  .language-switcher { width: 100%; margin-top: 2px; }
  .language-switcher-toggle { width: 100%; min-height: 54px; padding: 14px 6px; justify-content: space-between; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 17px; letter-spacing: .02em; }
  .language-switcher-toggle:hover { background: transparent; border-color: var(--line); }
  .language-switcher-current { gap: 10px; }
  .language-switcher-toggle svg { width: 20px; height: 20px; }
  .language-switcher-toggle .language-switcher-chevron { width: 16px; height: 16px; }
  .language-switcher-menu { position: static; min-width: 0; margin-top: 7px; padding: 6px; background: #f6f8f5; border-color: rgba(7,63,72,.08); border-radius: 12px; box-shadow: none; }
  .main-nav .language-switcher-option { min-height: 46px; padding: 12px 14px; border: 0; border-radius: 8px; font-size: 16px; }
  .menu-toggle { display: block; }
  .menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-toggle.active span:nth-child(2) { opacity: 0; }
  .menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .trust-grid { grid-template-columns: 1fr 1fr; gap: 24px 0; }
  .trust-grid article:nth-child(2) { border-right: 0; }
  .section-heading { gap: 35px; }
  .solution-grid { grid-template-columns: 1fr 1fr; }
  .solution-card:last-child { grid-column: 1 / -1; min-height: 340px; }
  .process-layout { gap: 55px; }
  .success-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .success-card:last-child { grid-column: 1 / -1; width: calc(50% - 13px); justify-self: center; }
  .success-cta { grid-template-columns: auto minmax(0, 1fr); }
  .success-cta .button { grid-column: 2; width: max-content; }
  .cta-card { padding: 52px 42px; gap: 35px; }
  .story-grid { gap: 42px; }
  .story-visual img { min-height: 460px; }
  .principle-card { padding: 34px; grid-template-columns: 1fr; }
  .team-photo { height: 400px; }
  .value-item { padding-inline: 20px; }
  .home-confidence .values-grid { grid-template-columns: repeat(2, 1fr); gap: 44px 0; }
  .home-confidence .value-item:nth-child(2) { border-right: 0; }
  .home-guarantee-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 22px; }
  .home-guarantee-link { grid-column: 1 / -1; justify-self: center; }
}

@media (max-width: 700px) {
  .container { width: min(calc(100% - 32px), var(--container)); }
  .breadcrumb { padding-top: 14px; }
  .breadcrumb ol { gap: 5px; font-size: 11px; }
  .breadcrumb li { gap: 5px; }
  .header-inner { min-height: 72px; }
  .brand-logo { width: 138px; }
  .main-nav { inset: 72px 0 auto 0; height: calc(100vh - 72px); }
  .hero { min-height: 690px; align-items: end; }
  .hero-media { background: linear-gradient(180deg, rgba(2,36,42,.1) 0%, rgba(2,36,42,.55) 36%, rgba(2,36,42,.97) 82%), url("assets/hero-ecohost.webp") 59% center/cover no-repeat; }
  .hero-content { padding-block: 250px 105px; }
  .eyebrow { font-size: 10px; }
  h1 { margin-bottom: 20px; font-size: clamp(43px, 13.5vw, 60px); }
  .hero-copy { margin-bottom: 28px; font-size: 16px; line-height: 1.55; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 22px; }
  .button { width: 100%; }
  .trust-bar { margin-top: 0; background: var(--petrol); }
  .trust-grid { width: 100%; min-height: 0; padding: 30px 24px; grid-template-columns: 1fr 1fr; gap: 30px 0; border-radius: 0; box-shadow: none; }
  .trust-grid article { padding: 0 15px; align-items: flex-start; flex-direction: column; gap: 10px; }
  .trust-grid article:nth-child(2) { border-right: 0; }
  .icon-badge { width: 37px; height: 37px; }
  .section { padding: 85px 0; }
  .section-heading { margin-bottom: 35px; grid-template-columns: 1fr; gap: 5px; }
  h2 { font-size: 38px; }
  .solution-grid { grid-template-columns: 1fr; }
  .solution-card, .solution-card:last-child { grid-column: auto; min-height: 355px; padding: 28px; }
  .feature-icon { margin-bottom: 30px; }
  .process-layout { grid-template-columns: 1fr; gap: 50px; }
  .process-intro { position: static; }
  .process-list li { padding: 0 0 50px 78px; }
  .process-list li:not(:last-child)::before { left: 27px; top: 58px; }
  .step-icon { width: 56px; height: 56px; border-radius: 18px; }
  .installations-grid { grid-template-columns: 1fr; gap: 20px; }
  .installation-card h3 { padding: 20px 22px 22px; text-align: center; }
  .installations-action { margin-top: 32px; }
  .installations-action .button { width: 100%; }
  .success-stories { padding: 82px 0; }
  .success-stories > .container { width: min(calc(100% - 32px), 1260px); }
  .success-heading { margin-bottom: 36px; }
  .success-heading h2 { font-size: 38px; }
  .success-heading > p:last-child { font-size: 16px; }
  .success-grid { grid-template-columns: 1fr; gap: 20px; }
  .success-card, .success-card:last-child { grid-column: auto; width: 100%; min-height: 500px; padding: 32px 27px 29px; }
  .success-card-icon { width: 70px; height: 70px; margin-bottom: 25px; }
  .success-card-icon svg { width: 34px; height: 34px; }
  .success-metric { min-height: 0; }
  .success-metric strong { font-size: 54px; }
  .success-metric--text strong { max-width: 260px; font-size: 38px; line-height: 1.04; }
  .success-card blockquote { margin-top: 27px; padding-top: 24px; font-size: 15px; }
  .success-avatar { width: 56px; height: 56px; }
  .success-client strong { font-size: 14px; }
  .success-client span, .success-client small { font-size: 11px; }
  .success-cta { padding: 28px 24px; grid-template-columns: 1fr; justify-items: center; gap: 18px; text-align: center; }
  .success-cta h3 { font-size: 22px; }
  .success-cta .button { grid-column: auto; width: 100%; min-width: 0; }
  .cta-section { padding: 70px 0; }
  .cta-card { padding: 42px 26px; grid-template-columns: 1fr; gap: 32px; border-radius: 24px; }
  .cta-card h2 { font-size: 35px; }
  .footer-inner { grid-template-columns: 1fr; gap: 36px; }
  .footer-logo { width: 210px; }
  .footer-links { justify-self: start; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 35px; }
  .footer-inner > small { grid-column: auto; }
  .floating-contact { width: 50px; height: 50px; right: 16px; bottom: 16px; }
  .about-story { padding: 64px 0 68px; }
  .story-grid { grid-template-columns: 1fr; gap: 45px; }
  .story-copy h1 { font-size: 48px; }
  .story-copy blockquote { font-size: 22px; }
  .story-visual { border-radius: 22px; }
  .story-visual img { min-height: 360px; }
  .story-visual figcaption { right: 12px; bottom: 12px; }
  .about-principles { padding: 10px 0 80px; }
  .principles-grid { grid-template-columns: 1fr; }
  .principle-card { min-height: 0; padding: 30px 26px; grid-template-columns: auto 1fr; gap: 18px; }
  .principle-icon { width: 54px; height: 54px; border-radius: 17px; }
  .principle-icon svg { width: 27px; height: 27px; }
  .principle-card h2 { font-size: 25px; }
  .principle-card .eyebrow { display: none; }
  .principle-card p:last-child { grid-column: 1 / -1; }
  .about-team { padding: 80px 0; }
  .team-heading { margin-bottom: 36px; text-align: left; }
  .team-heading .eyebrow::before { display: inline-block; }
  .team-grid { grid-template-columns: 1fr; gap: 20px; }
  .team-photo { height: 440px; }
  .team-info { padding: 22px; }
  .values-grid { grid-template-columns: 1fr 1fr; gap: 48px 0; }
  .value-item { padding-inline: 15px; }
  .value-item:nth-child(2) { border-right: 0; }
  .home-confidence { padding: 68px 0; }
  .home-guarantee-reference { padding-bottom: 68px; }
  .home-guarantee-card { padding: 24px 22px; grid-template-columns: 1fr; row-gap: 0; }
  .home-guarantee-benefit { padding: 0 0 20px; }
  .home-guarantee-benefit + .home-guarantee-benefit { padding: 20px 0; border-top: 1px solid rgba(7,63,72,.11); border-left: 0; }
  .home-guarantee-link { width: 100%; margin-top: 4px; grid-column: auto; }
  .about-cta { padding: 72px 0; }
  .about-cta .button { min-width: 0; }
}

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

/* Cómo funciona */
.how-page { background: #fbfaf7; }
.how-page .site-header { background: rgba(255,255,255,.96); }

.how-hero { position: relative; overflow: hidden; padding: 76px 0 84px; background: linear-gradient(120deg, #fff 0%, #fff 42%, #f5f0e8 100%); }
.how-hero::before { content: ""; position: absolute; width: 520px; height: 520px; left: -360px; top: -250px; border: 1px solid rgba(88,173,88,.15); border-radius: 50%; box-shadow: 0 0 0 30px rgba(88,173,88,.025), 0 0 0 60px rgba(88,173,88,.02); }
.how-hero-grid { position: relative; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 60px; }
.how-hero-copy h1 { margin-bottom: 26px; color: var(--petrol); font-size: clamp(48px, 5.4vw, 72px); line-height: 1.02; }
.how-hero-copy > p:not(.eyebrow) { max-width: 540px; margin-bottom: 28px; color: var(--muted); font-size: 17px; line-height: 1.75; }
.how-highlights { margin-bottom: 32px; display: flex; flex-wrap: wrap; gap: 10px; }
.how-highlights span { padding: 9px 12px; display: inline-flex; align-items: center; gap: 8px; color: var(--petrol); background: white; border: 1px solid rgba(7,63,72,.1); border-radius: 999px; box-shadow: 0 8px 20px rgba(7,63,72,.05); font-size: 11px; font-weight: 700; }
.how-highlights svg { width: 17px; height: 17px; fill: none; stroke: var(--green-dark); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.how-hero-copy .button { width: max-content; }
.how-hero-visual { position: relative; min-height: 490px; border-radius: 30px; box-shadow: 0 28px 75px rgba(7,63,72,.16); }
.how-hero-visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(255,255,255,.7); border-radius: inherit; }
.how-hero-room { width: 100%; height: 100%; min-height: 490px; object-fit: cover; object-position: 70% center; border-radius: inherit; }
.hero-device-card { position: absolute; overflow: hidden; background: white; border: 6px solid rgba(255,255,255,.95); border-radius: 22px; box-shadow: 0 18px 35px rgba(7,63,72,.22); }
.hero-device-card img { width: 100%; height: 100%; object-fit: cover; }
.hero-presence { width: 145px; height: 145px; left: -36px; bottom: 36px; transform: rotate(-4deg); }
.hero-presence img { object-position: 82% center; }
.hero-door { width: 125px; height: 125px; left: 83px; bottom: -24px; transform: rotate(3deg); }
.hero-door img { object-position: 84% center; }
.hero-live { position: absolute; right: 18px; top: 18px; padding: 10px 14px; display: flex; align-items: center; gap: 9px; color: white; background: rgba(4,47,54,.82); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; backdrop-filter: blur(12px); font-size: 11px; font-weight: 700; }
.hero-live i { width: 8px; height: 8px; background: #75d16e; border-radius: 50%; box-shadow: 0 0 0 5px rgba(117,209,110,.17); animation: livePulse 2s ease-out infinite; }
@keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(117,209,110,.18); } 50% { box-shadow: 0 0 0 8px rgba(117,209,110,.03); } }

.how-system { padding: 110px 0 116px; background: white; }
.how-centered-heading { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.how-centered-heading .eyebrow::before { display: none; }
.how-centered-heading h2 { margin-bottom: 16px; }
.how-centered-heading > p:last-child { color: var(--muted); line-height: 1.7; }
.ecosystem-visual { position: relative; }
.ecosystem-visual > img { width: 100%; height: auto; object-fit: contain; border-radius: 30px; box-shadow: 0 25px 65px rgba(7,63,72,.16); }
.ecosystem-hotspots { position: absolute; inset: 0; pointer-events: none; }
.ecosystem-hotspot { position: absolute; min-width: 225px; max-width: 280px; padding: 14px 17px; display: flex; align-items: center; gap: 12px; color: white; background: rgba(6,78,82,.94); border: 1px solid rgba(255,255,255,.2); border-radius: 17px; box-shadow: 0 12px 30px rgba(2,36,42,.2); pointer-events: auto; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.ecosystem-hotspot:hover { color: white; background: #064e52; transform: translateY(-2px); box-shadow: 0 16px 36px rgba(2,36,42,.28); }
.ecosystem-hotspot:focus-visible { color: white; outline: 3px solid white; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(88,173,88,.45), 0 16px 36px rgba(2,36,42,.28); }
.ecosystem-hotspot b { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; color: white; background: var(--green); border-radius: 50%; font: 800 12px/1 "Manrope", sans-serif; }
.ecosystem-hotspot span { font: 700 13px/1.25 "Manrope", sans-serif; }
.ecosystem-hotspot small { margin-top: 4px; display: block; color: rgba(255,255,255,.68); font: 500 10px/1.25 "DM Sans", sans-serif; }
.ecosystem-hotspot-thermostat { left: 31%; top: 43%; }
.ecosystem-hotspot-presence { left: 75%; top: 27%; }
.ecosystem-hotspot-door { left: 3%; top: 28%; }
#termostato-inteligente, #sensor-presencia-mmwave, #sensor-puertas-ventanas { scroll-margin-top: 110px; }
@keyframes radarWave { 0% { opacity: .8; transform: translate(-50%,-50%) scale(.55); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.2); } }

.device-section { padding: 120px 0; background: linear-gradient(180deg, #f7f5ef 0%, #fbfaf7 100%); }
.device-heading { margin-bottom: 46px; }
.device-row { position: relative; min-height: 360px; margin-bottom: 24px; display: grid; grid-template-columns: .82fr 1.18fr; overflow: hidden; background: white; border: 1px solid rgba(7,63,72,.075); border-radius: 27px; box-shadow: 0 16px 42px rgba(7,63,72,.07); transition: transform .3s ease, box-shadow .3s ease; }
.device-row:hover { transform: translateY(-4px); box-shadow: 0 24px 56px rgba(7,63,72,.11); }
.device-row-reverse { grid-template-columns: 1.18fr .82fr; }
.device-row-reverse .device-media { grid-column: 2; grid-row: 1; }
.device-row-reverse .device-content { grid-column: 1; grid-row: 1; }
.device-media { min-height: 360px; overflow: hidden; background: #e9e2d8; }
.device-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.device-row:hover .device-media img { transform: scale(1.025); }
.thermostat-media img { object-position: 78% center; }
.presence-media img, .door-media img { object-position: center; }
.device-content { position: relative; padding: 48px 54px; align-self: center; }
.device-number { position: absolute; right: 42px; top: 34px; color: rgba(7,63,72,.24); font: 800 12px/1 "Manrope", sans-serif; letter-spacing: .18em; }
.device-content h3 { margin-bottom: 14px; color: var(--petrol); font-size: 29px; letter-spacing: -.035em; }
.device-content > p { max-width: 650px; margin-bottom: 25px; color: var(--muted); line-height: 1.68; }
.device-benefits { margin: 0 0 27px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.device-benefits li { min-width: 135px; padding: 12px 14px; display: flex; align-items: center; gap: 9px; color: var(--petrol); background: #f7faf7; border: 1px solid rgba(7,63,72,.07); border-radius: 13px; font-size: 11px; font-weight: 700; }
.device-benefits svg { width: 21px; height: 21px; flex: 0 0 auto; fill: none; stroke: var(--green-dark); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.device-more { min-height: 42px; padding: 0 16px; display: inline-flex; align-items: center; gap: 11px; color: var(--green-dark); border: 1px solid rgba(50,130,69,.6); border-radius: 11px; font-size: 13px; font-weight: 700; transition: color .2s ease, background .2s ease, transform .2s ease; }
.device-more:hover { color: white; background: var(--green-dark); transform: translateY(-2px); }
.device-more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; }

.smart-cycle { position: relative; overflow: hidden; padding: 100px 0 106px; color: white; background: linear-gradient(135deg, var(--petrol-deep), #07545c); }
.smart-cycle::before { content: ""; position: absolute; inset: 0; opacity: .22; background: repeating-radial-gradient(ellipse at 50% 120%, transparent 0 25px, rgba(88,173,88,.3) 26px 27px, transparent 28px 45px); }
.cycle-heading { position: relative; margin-bottom: 48px; text-align: center; }
.cycle-heading .eyebrow::before { display: none; }
.cycle-heading h2 { margin: 0; font-size: clamp(34px, 4vw, 48px); }
.cycle-grid { position: relative; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; }
.cycle-grid::before { content: ""; position: absolute; left: 12%; right: 12%; top: 40px; border-top: 1px dashed rgba(255,255,255,.34); }
.cycle-grid li { position: relative; padding: 0 27px; text-align: center; }
.cycle-grid li > span { position: relative; z-index: 1; width: 82px; height: 82px; margin: 0 auto 20px; display: grid; place-items: center; color: white; background: #07444d; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; box-shadow: 0 0 0 9px rgba(4,47,54,.9); }
.cycle-grid svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cycle-grid small { position: absolute; right: calc(50% - 43px); top: 0; z-index: 2; width: 25px; height: 25px; display: grid; place-items: center; color: white; background: var(--green-dark); border-radius: 50%; font-size: 9px; font-weight: 800; }
.cycle-grid h3 { margin-bottom: 9px; font-size: 21px; }
.cycle-grid p { margin: 0; color: rgba(255,255,255,.67); font-size: 12px; line-height: 1.55; }

.scenario-section { padding: 110px 0 105px; background: white; }
.scenario-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; }
.scenario-card { min-height: 245px; padding: 31px 25px; text-align: center; background: #fff; border: 1px solid rgba(7,63,72,.08); border-radius: 21px; box-shadow: 0 13px 34px rgba(7,63,72,.055); transition: transform .25s ease, border-color .25s ease; }
.scenario-card:hover { transform: translateY(-5px); border-color: rgba(88,173,88,.4); }
.scenario-card > span { width: 62px; height: 62px; margin: 0 auto 22px; display: grid; place-items: center; color: var(--green-dark); background: #f0f7f0; border-radius: 50%; }
.scenario-card svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.scenario-card h3 { margin-bottom: 11px; font-size: 17px; }
.scenario-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

.faq-section { padding: 110px 0; background: #f5f3ed; }
.faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; align-items: start; gap: 85px; }
.faq-intro { position: sticky; top: 126px; }
.faq-intro h2 { font-size: 42px; }
.faq-intro > p:last-child { color: var(--muted); line-height: 1.7; }
.faq-list { display: grid; gap: 12px; }
.faq-list details { padding: 0 23px; background: white; border: 1px solid rgba(7,63,72,.08); border-radius: 16px; box-shadow: 0 8px 24px rgba(7,63,72,.04); }
.faq-list summary { position: relative; padding: 21px 34px 21px 0; cursor: pointer; list-style: none; color: var(--petrol); font: 700 15px/1.4 "Manrope", sans-serif; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-chevron { position: absolute; right: 0; top: 50%; width: 25px; height: 25px; padding: 5px; color: var(--green-dark); background: #eef6ee; border-radius: 50%; transform: translateY(-50%); transition: transform .24s ease; }
.faq-list details[open] .faq-chevron { transform: translateY(-50%) rotate(180deg); }
.faq-list details p { margin: -4px 0 21px; padding-right: 36px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.home-faq .faq-list details[open] p { animation: faq-answer-in .24s ease both; }
@keyframes faq-answer-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

.demo-section { padding: 112px 0; background: white; }
.demo-shell { position: relative; overflow: hidden; padding: 44px; display: grid; grid-template-columns: .68fr 1.32fr; gap: 34px; color: white; background: linear-gradient(135deg, #063b45, #052f36 70%); border-radius: 30px; box-shadow: 0 28px 70px rgba(3,47,54,.22); }
.demo-shell::before { content: ""; position: absolute; width: 460px; height: 460px; left: -300px; bottom: -300px; border: 1px solid rgba(88,173,88,.28); border-radius: 50%; box-shadow: 0 0 0 25px rgba(88,173,88,.035), 0 0 0 50px rgba(88,173,88,.025); }
.demo-copy { position: relative; z-index: 1; padding: 18px 8px 0 4px; align-self: center; }
.demo-copy h2 { margin-bottom: 18px; font-size: 39px; }
.demo-copy > p:not(.eyebrow) { margin-bottom: 30px; color: rgba(255,255,255,.73); line-height: 1.65; }
.demo-player { position: relative; min-height: 365px; overflow: hidden; background: #021f24; border: 1px solid rgba(125,204,119,.5); border-radius: 21px; box-shadow: 0 16px 38px rgba(0,0,0,.24); }
.demo-player > img { width: 100%; height: 100%; min-height: 365px; object-fit: cover; }
.demo-player-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(1,24,28,.68), transparent 45%), linear-gradient(90deg, rgba(3,47,54,.16), transparent); }
.demo-play { position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; gap: 12px; color: white; background: transparent; border: 0; transform: translate(-50%,-50%); cursor: pointer; }
.demo-play > span { width: 88px; height: 88px; display: grid; place-items: center; color: white; background: rgba(3,47,54,.68); border: 2px solid white; border-radius: 50%; backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0,0,0,.25), 0 0 0 10px rgba(255,255,255,.08); transition: transform .2s ease, background .2s ease; }
.demo-play:hover > span { transform: scale(1.06); background: var(--green-dark); }
.demo-play svg { width: 34px; height: 34px; margin-left: 4px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; }
.demo-play small { padding: 8px 12px; background: rgba(3,47,54,.75); border-radius: 999px; backdrop-filter: blur(8px); font-size: 11px; font-weight: 700; }
.demo-controls { position: absolute; left: 18px; right: 18px; bottom: 15px; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 11px; }
.demo-controls > span { height: 3px; background: linear-gradient(90deg, var(--green) 0 27%, rgba(255,255,255,.35) 27%); border-radius: 999px; }
.demo-controls svg { width: 18px; height: 18px; fill: none; stroke: white; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.demo-message { position: absolute; left: 50%; bottom: 43px; margin: 0; padding: 8px 12px; color: white; background: rgba(3,47,54,.84); border-radius: 999px; opacity: 0; transform: translate(-50%,8px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; font-size: 11px; }
.demo-player.is-previewing .demo-message { opacity: 1; transform: translate(-50%,0); }
.demo-signal { position: absolute; width: 11px; height: 11px; background: #76d470; border: 2px solid white; border-radius: 50%; box-shadow: 0 0 0 6px rgba(88,173,88,.2); }
.demo-signal::before, .demo-signal::after { content: ""; position: absolute; left: 50%; top: 50%; border: 1px solid rgba(125,204,119,.55); border-radius: 50%; transform: translate(-50%,-50%); animation: radarWave 2.4s linear infinite; }
.demo-signal::before { width: 45px; height: 45px; }
.demo-signal::after { width: 75px; height: 75px; animation-delay: .7s; }
.signal-one { left: 25%; top: 38%; }
.signal-two { right: 17%; top: 26%; }
.demo-status { position: relative; z-index: 1; grid-column: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.demo-status span { min-height: 39px; padding: 8px 10px; display: flex; align-items: center; justify-content: center; gap: 8px; color: rgba(255,255,255,.82); border: 1px solid rgba(88,173,88,.45); border-radius: 999px; font-size: 10px; font-weight: 600; }
.demo-status i { width: 7px; height: 7px; background: #74ce70; border-radius: 50%; }

.how-contact { padding: 78px 0; background: #f4f2ec; }
.how-contact-inner { display: flex; align-items: center; justify-content: space-between; gap: 60px; }
.how-contact .eyebrow { margin-bottom: 12px; }
.how-contact h2 { max-width: 740px; margin: 0; font-size: 37px; }
.how-contact .button { flex: 0 0 auto; }
.product-packages-cta { padding: 64px 0; background: white; }
.product-packages-cta .how-contact-inner { padding: 38px 42px; gap: 36px; background: #f4f2ec; border: 1px solid rgba(17,47,53,.08); border-radius: 24px; }
.product-packages-cta h2 { margin-bottom: 10px; font-size: clamp(30px, 3vw, 38px); }
.product-packages-cta p { max-width: 640px; margin: 0; color: var(--muted); line-height: 1.65; }
.product-packages-cta p + p { margin-top: 8px; font-size: 13px; }

@media (max-width: 1050px) {
  .how-hero-grid { gap: 38px; }
  .how-hero-visual, .how-hero-room { min-height: 440px; }
  .device-content { padding: 40px; }
  .device-benefits li { min-width: 120px; }
  .demo-shell { grid-template-columns: .78fr 1.22fr; }
  .demo-copy h2 { font-size: 34px; }
}

@media (max-width: 1000px) {
  .ecosystem-visual { display: grid; gap: 18px; }
  .ecosystem-hotspots { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; pointer-events: auto; }
  .ecosystem-hotspot { position: static; min-width: 0; max-width: none; width: 100%; transform: none; }
  .ecosystem-hotspot:hover { transform: translateY(-2px); }
  .ecosystem-hotspot-door { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .how-hero { padding: 62px 0 82px; }
  .how-hero-grid { grid-template-columns: 1fr; gap: 55px; }
  .how-hero-copy { max-width: 720px; }
  .how-hero-visual, .how-hero-room { min-height: 520px; }
  .hero-presence { left: 20px; }
  .hero-door { left: 150px; }
  .device-row, .device-row-reverse { grid-template-columns: .9fr 1.1fr; }
  .device-row-reverse .device-media { grid-column: 2; }
  .cycle-grid li { padding-inline: 16px; }
  .scenario-grid { grid-template-columns: 1fr 1fr; }
  .faq-layout { gap: 50px; }
  .demo-shell { grid-template-columns: 1fr; }
  .demo-copy { max-width: 700px; }
  .demo-player { min-height: 430px; }
  .demo-player > img { min-height: 430px; }
  .demo-status { grid-column: 1; }
}

@media (max-width: 700px) {
  .how-hero { padding: 48px 0 72px; }
  .how-hero-copy h1 { font-size: 44px; }
  .how-hero-copy > p:not(.eyebrow) { font-size: 16px; }
  .how-hero-copy .button { width: 100%; }
  .how-hero-visual, .how-hero-room { min-height: 390px; }
  .how-hero-room { object-position: 77% center; }
  .hero-device-card { border-width: 4px; border-radius: 16px; }
  .hero-presence { width: 103px; height: 103px; left: 12px; bottom: 18px; }
  .hero-door { width: 92px; height: 92px; left: 98px; bottom: -23px; }
  .hero-live { right: 12px; top: 12px; }
  .how-system { padding: 78px 0 82px; }
  .how-centered-heading { margin-bottom: 35px; text-align: left; }
  .how-centered-heading .eyebrow::before { display: inline-block; }
  .ecosystem-visual { gap: 14px; }
  .ecosystem-visual > img { border-radius: 22px; }
  .ecosystem-hotspots { grid-template-columns: 1fr; gap: 10px; }
  .ecosystem-hotspot { padding: 14px 15px; }
  .ecosystem-hotspot-door { grid-column: auto; }
  .device-section { padding: 82px 0; }
  .device-heading { margin-bottom: 34px; }
  .device-row, .device-row-reverse { min-height: 0; grid-template-columns: 1fr; }
  .device-row .device-media, .device-row-reverse .device-media { grid-column: 1; grid-row: 1; min-height: 285px; }
  .device-row .device-content, .device-row-reverse .device-content { grid-column: 1; grid-row: 2; padding: 31px 25px 34px; }
  .device-content h3 { padding-right: 34px; font-size: 24px; }
  .device-number { right: 25px; top: 36px; }
  .device-benefits { display: grid; grid-template-columns: 1fr; }
  .device-benefits li { min-width: 0; }
  .device-more { width: 100%; justify-content: center; }
  .thermostat-media img { object-position: 75% center; }
  .presence-media img, .door-media img { object-position: center; }
  .smart-cycle { padding: 78px 0 82px; }
  .cycle-heading { text-align: left; }
  .cycle-heading .eyebrow::before { display: inline-block; }
  .cycle-grid { grid-template-columns: 1fr 1fr; gap: 46px 0; }
  .cycle-grid::before { display: none; }
  .cycle-grid li { padding-inline: 12px; }
  .cycle-grid li > span { width: 68px; height: 68px; }
  .cycle-grid small { right: calc(50% - 36px); }
  .scenario-section { padding: 80px 0; }
  .scenario-grid { grid-template-columns: 1fr; }
  .scenario-card { min-height: 0; padding: 27px 23px; display: grid; grid-template-columns: auto 1fr; gap: 0 18px; text-align: left; }
  .scenario-card > span { grid-row: 1 / 3; width: 54px; height: 54px; margin: 0; }
  .scenario-card h3 { align-self: end; }
  .scenario-card p { align-self: start; }
  .faq-section { padding: 80px 0; }
  .faq-layout { grid-template-columns: 1fr; gap: 30px; }
  .faq-intro { position: static; }
  .faq-intro h2 { font-size: 36px; }
  .faq-list details { padding-inline: 18px; }
  .faq-list summary { font-size: 13px; }
  .demo-section { padding: 78px 0; }
  .demo-shell { width: calc(100% - 24px); padding: 30px 18px 20px; gap: 28px; border-radius: 25px; }
  .demo-copy { padding: 0; }
  .demo-copy h2 { font-size: 33px; }
  .demo-player, .demo-player > img { min-height: 300px; }
  .demo-player > img { object-position: 62% center; }
  .demo-play > span { width: 72px; height: 72px; }
  .demo-status { grid-template-columns: 1fr; }
  .how-contact { padding: 65px 0; }
  .how-contact-inner { align-items: stretch; flex-direction: column; gap: 28px; }
  .how-contact h2 { font-size: 32px; }
  .product-packages-cta { padding: 52px 0; }
  .product-packages-cta .how-contact-inner { padding: 32px 28px; gap: 24px; }
}

/* Páginas individuales de dispositivos */
.device-detail-page { background: #fbfaf7; }
.detail-hero { position: relative; overflow: hidden; padding: 78px 0 92px; background: linear-gradient(120deg, #fff 0%, #fff 48%, #f4f0e8 100%); }
.detail-hero::before { content: ""; position: absolute; width: 470px; height: 470px; left: -310px; bottom: -320px; border: 1px solid rgba(88,173,88,.18); border-radius: 50%; box-shadow: 0 0 0 28px rgba(88,173,88,.03), 0 0 0 56px rgba(88,173,88,.02); }
.detail-hero-grid { position: relative; display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: 65px; }
.detail-back { margin-bottom: 34px; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.detail-back svg { width: 16px; height: 16px; flex: 0 0 auto; }
.detail-back:hover { color: var(--green-dark); }
.detail-copy h1 { max-width: 640px; margin-bottom: 24px; color: var(--petrol); font-size: clamp(48px, 5.5vw, 70px); }
.detail-copy > p:not(.eyebrow) { max-width: 570px; margin-bottom: 27px; color: var(--muted); font-size: 17px; line-height: 1.72; }
.detail-tags { margin-bottom: 32px; display: flex; flex-wrap: wrap; gap: 9px; }
.detail-tags span { padding: 9px 12px; color: var(--petrol); background: #eef6ee; border: 1px solid rgba(50,130,69,.15); border-radius: 999px; font-size: 11px; font-weight: 700; }
.detail-copy .button { width: max-content; }
.detail-media { min-height: 540px; margin: 0; overflow: hidden; border-radius: 30px; box-shadow: 0 27px 70px rgba(7,63,72,.16); }
.detail-media img { width: 100%; height: 540px; object-fit: cover; object-position: 75% center; }
.detail-presence-media img, .detail-door-media img { object-position: 80% center; }
.detail-process { padding: 112px 0 120px; background: white; }
.detail-steps { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; }
.detail-steps li { position: relative; min-height: 300px; padding: 34px; background: #f9faf7; border: 1px solid rgba(7,63,72,.08); border-radius: 23px; }
.detail-steps li > span { position: absolute; right: 28px; top: 28px; color: rgba(7,63,72,.28); font: 800 11px/1 "Manrope", sans-serif; letter-spacing: .15em; }
.detail-steps svg { width: 52px; height: 52px; margin-bottom: 40px; padding: 12px; fill: none; stroke: var(--green-dark); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; background: #eaf4ea; border-radius: 16px; }
.detail-steps h3 { margin-bottom: 12px; font-size: 21px; }
.detail-steps p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.presence-privacy { padding: 0 0 88px; background: white; }
.presence-privacy-card { max-width: 930px; margin: 0 auto; padding: 30px 34px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 22px; background: #f9faf7; border: 1px solid rgba(7,63,72,.1); border-radius: 22px; box-shadow: 0 14px 34px rgba(7,63,72,.05); }
.presence-privacy-card > div { min-width: 0; }
.presence-privacy-icon { width: 52px; height: 52px; display: grid; place-items: center; color: var(--green-dark); background: #eaf4ea; border-radius: 16px; }
.presence-privacy-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.presence-privacy h2 { margin-bottom: 9px; font-size: 26px; letter-spacing: -.025em; }
.presence-privacy p { max-width: 760px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.presence-privacy .presence-privacy-secondary { margin-top: 8px; color: var(--petrol); font-weight: 600; }
.detail-note { position: relative; overflow: hidden; padding: 92px 0; color: white; background: linear-gradient(135deg, var(--petrol), #075a61); }
.detail-note::after { content: ""; position: absolute; width: 380px; height: 380px; right: -190px; bottom: -280px; border: 1px solid rgba(125,204,119,.3); border-radius: 50%; box-shadow: 0 0 0 24px rgba(125,204,119,.04), 0 0 0 48px rgba(125,204,119,.03); }
.detail-note-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 75px; }
.detail-note h2 { max-width: 830px; margin-bottom: 14px; font-size: 42px; }
.detail-note p:not(.eyebrow) { max-width: 720px; margin: 0; color: rgba(255,255,255,.72); line-height: 1.65; }

@media (max-width: 980px) {
  .detail-hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .detail-copy { max-width: 760px; }
  .detail-media, .detail-media img { min-height: 500px; height: 500px; }
  .detail-note-inner { grid-template-columns: 1fr; gap: 35px; }
  .detail-note-inner .button { width: max-content; }
}

@media (max-width: 700px) {
  .detail-hero { padding: 48px 0 72px; }
  .detail-back { margin-bottom: 28px; }
  .detail-copy h1 { font-size: 43px; }
  .detail-copy .button { width: 100%; }
  .detail-media, .detail-media img { min-height: 370px; height: 370px; }
  .detail-media { border-radius: 23px; }
  .detail-process { padding: 80px 0; }
  .detail-steps { grid-template-columns: 1fr; }
  .detail-steps li { min-height: 0; }
  .presence-privacy { padding-bottom: 64px; }
  .presence-privacy-card { padding: 24px 22px; gap: 16px; }
  .presence-privacy-card > div { display: contents; }
  .presence-privacy-icon { width: 46px; height: 46px; border-radius: 14px; }
  .presence-privacy-icon svg { width: 24px; height: 24px; }
  .presence-privacy h2 { align-self: center; margin: 0; font-size: 23px; }
  .presence-privacy p { grid-column: 1 / -1; }
  .detail-note { padding: 75px 0; }
  .detail-note h2 { font-size: 34px; }
  .detail-note-inner .button { width: 100%; }
}

/* Paquetes y precios */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.pricing-page { background: #fbfaf7; }
.pricing-hero { position: relative; overflow: hidden; padding: 78px 0 145px; text-align: center; background: linear-gradient(180deg, #fff 0%, #f8f6f1 100%); }
.pricing-hero::before, .pricing-hero::after { content: ""; position: absolute; width: 430px; height: 430px; border: 1px solid rgba(88,173,88,.12); border-radius: 50%; box-shadow: 0 0 0 28px rgba(88,173,88,.022), 0 0 0 56px rgba(88,173,88,.018); }
.pricing-hero::before { left: -310px; top: -250px; }
.pricing-hero::after { right: -330px; bottom: -320px; }
.pricing-hero-inner { position: relative; z-index: 1; }
.pricing-hero .eyebrow::before { display: none; }
.pricing-hero h1 { max-width: 790px; margin: 0 auto 22px; color: var(--petrol); font-size: clamp(50px, 5.5vw, 72px); }
.pricing-hero-inner > p:not(.eyebrow) { max-width: 590px; margin: 0 auto 34px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.pricing-trust { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; }
.pricing-trust span { padding: 11px 15px; display: inline-flex; align-items: center; gap: 9px; color: var(--petrol); background: white; border: 1px solid rgba(7,63,72,.08); border-radius: 999px; box-shadow: 0 9px 25px rgba(7,63,72,.045); font-size: 12px; font-weight: 700; }
.pricing-trust svg { width: 20px; height: 20px; fill: none; stroke: var(--green-dark); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.packages-section { position: relative; z-index: 2; margin-top: -76px; padding: 0 0 118px; }
.packages-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 18px; }
.package-card { position: relative; min-width: 0; padding: 34px 29px 27px; display: flex; flex-direction: column; background: white; border: 1px solid rgba(7,63,72,.09); border-radius: 24px; box-shadow: 0 18px 45px rgba(7,63,72,.075); transition: transform .28s ease, box-shadow .28s ease; }
.package-card:hover { transform: translateY(-6px); box-shadow: 0 27px 58px rgba(7,63,72,.12); }
.package-featured { border: 2px solid var(--green); box-shadow: 0 24px 58px rgba(50,130,69,.14); }
.popular-badge { position: absolute; left: 50%; top: -16px; min-width: 154px; padding: 9px 15px; color: white; background: linear-gradient(135deg, var(--green-dark), var(--green)); border-radius: 999px; transform: translateX(-50%); text-align: center; font: 800 10px/1 "Manrope", sans-serif; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 8px 20px rgba(50,130,69,.22); }
.package-header { text-align: center; }
.package-header h3 { margin-bottom: 6px; color: var(--petrol); font-size: 28px; letter-spacing: -.035em; }
.package-header p { margin: 0; color: var(--green-dark); font-size: 12px; font-weight: 700; }
.package-products { height: 172px; margin: 23px 0 22px; display: flex; align-items: center; justify-content: center; }
.package-products > span { position: relative; width: 165px; height: 165px; display: flex; align-items: center; justify-content: center; overflow: visible; flex: 0 0 auto; }
.package-products img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 13px 12px rgba(7,63,72,.16)); }
.package-basic > span { width: 180px; height: 180px; }
.package-confort > span:first-child { transform: translateX(23px); z-index: 2; }
.package-confort > span:last-child { transform: translateX(-23px) rotate(2deg); z-index: 1; }
.package-complete > span { width: 132px; height: 150px; }
.package-complete > span:first-child { transform: translateX(34px); z-index: 3; }
.package-complete > span:nth-child(2) { transform: translateX(0); z-index: 2; }
.package-complete > span:last-child { transform: translateX(-34px) rotate(2deg); z-index: 1; }
.package-description { min-height: 66px; margin-bottom: 24px; color: var(--muted); text-align: center; font-size: 13px; line-height: 1.62; }
.package-features { margin: 0 0 28px; padding: 0; display: grid; gap: 13px; list-style: none; }
.package-features li { display: flex; align-items: flex-start; gap: 10px; color: var(--petrol); font-size: 12px; line-height: 1.4; }
.package-features svg { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: var(--green-dark); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.package-price { margin-top: auto; padding: 25px 0 20px; display: flex; align-items: flex-start; justify-content: center; color: var(--petrol); border-top: 1px solid var(--line); }
.package-price span { margin: 6px 3px 0 0; font: 800 17px/1 "Manrope", sans-serif; }
.package-price strong { font: 800 35px/1 "Manrope", sans-serif; letter-spacing: -.04em; }
.package-button { width: 100%; min-height: 49px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--petrol); background: white; border: 1px solid rgba(0,90,91,.52); border-radius: 12px; cursor: pointer; font: 700 14px/1 "DM Sans", sans-serif; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.package-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.package-button:hover { color: white; background: #005a5b; border-color: #005a5b; transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,90,91,.16); }
.package-button:hover svg { transform: translateX(3px); }
.package-button:focus-visible { outline: 4px solid rgba(0,90,91,.14); outline-offset: 3px; }
.package-button-primary { color: white; background: #005a5b; border-color: #005a5b; box-shadow: 0 13px 28px rgba(0,90,91,.2); }

.comparison-section { padding: 108px 0 116px; background: white; }
.comparison-scroll { overflow-x: auto; border: 1px solid rgba(7,63,72,.09); border-radius: 22px; box-shadow: 0 18px 45px rgba(7,63,72,.065); scrollbar-width: thin; scrollbar-color: var(--green) #edf2ee; }
.comparison-hint { display: none; }
.comparison-table { width: 100%; min-width: 760px; border-spacing: 0; border-collapse: separate; background: white; }
.comparison-table th, .comparison-table td { height: 62px; padding: 12px 20px; border-right: 1px solid rgba(7,63,72,.07); border-bottom: 1px solid rgba(7,63,72,.07); }
.comparison-table tr > *:last-child { border-right: 0; }
.comparison-table tbody tr:last-child > * { border-bottom: 0; }
.comparison-table thead th { height: 72px; color: var(--petrol); background: #fafbf9; text-align: center; font: 800 14px/1.3 "Manrope", sans-serif; }
.comparison-table thead th:first-child { width: 40%; text-align: left; border-radius: 21px 0 0 0; }
.comparison-table thead th:last-child { border-radius: 0 21px 0 0; }
.comparison-table tbody th { color: var(--petrol); text-align: left; font-size: 12px; font-weight: 600; }
.comparison-table tbody th svg { width: 20px; height: 20px; margin-right: 10px; vertical-align: middle; fill: none; stroke: var(--green-dark); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.comparison-table td { text-align: center; }
.included { color: var(--green-dark); font-size: 22px; font-weight: 800; }
.included svg { width: 22px; height: 22px; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.not-included { color: #a5b0b1; font-size: 17px; }
.popular-column { position: relative; color: var(--green-dark) !important; background: #f4faf4 !important; border-left: 1px solid rgba(88,173,88,.55) !important; border-right: 1px solid rgba(88,173,88,.55) !important; }
.popular-column > span { position: absolute; left: 50%; top: -15px; padding: 7px 12px; color: white; background: var(--green-dark); border-radius: 999px; transform: translateX(-50%); white-space: nowrap; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.popular-cell { background: rgba(88,173,88,.045); border-left: 1px solid rgba(88,173,88,.28) !important; border-right: 1px solid rgba(88,173,88,.28) !important; }

#paquete-confort { scroll-margin-top: 112px; }
.savings-calculator { --calculator-accent: #005a5b; padding: 108px 0 112px; background: #f7f8f7; }
.savings-calculator-heading { max-width: 760px; margin: 0 auto 46px; text-align: center; }
.savings-calculator-heading .eyebrow::before { display: none; }
.savings-calculator-heading h2 { margin-bottom: 18px; color: var(--petrol); font-size: clamp(40px, 4.2vw, 56px); }
.savings-calculator-heading > p:last-child { max-width: 650px; margin: 0 auto; color: var(--muted); font-size: 16px; line-height: 1.7; }
.savings-calculator-shell { padding: 24px; display: grid; grid-template-columns: .82fr 1.18fr; gap: 24px; background: #eaf1f0; border: 1px solid rgba(0,90,91,.08); border-radius: 30px; box-shadow: 0 20px 54px rgba(7,63,72,.07); }
.calculator-inputs, .calculator-results { min-width: 0; border-radius: 23px; }
.calculator-inputs { padding: 38px 36px; background: white; }
.calculator-panel-heading { margin-bottom: 39px; display: flex; align-items: center; gap: 15px; }
.calculator-panel-heading > span { width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; color: var(--calculator-accent); background: #e7f2f1; border-radius: 16px; }
.calculator-panel-heading svg { width: 27px; height: 27px; }
.calculator-panel-heading small { display: block; margin-bottom: 3px; color: var(--green-dark); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.calculator-panel-heading h3 { color: var(--petrol); font-size: 20px; }
.calculator-control + .calculator-control { margin-top: 41px; padding-top: 37px; border-top: 1px solid rgba(7,63,72,.09); }
.calculator-control-heading { margin-bottom: 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.calculator-control-heading label { max-width: 230px; color: var(--petrol); font: 700 14px/1.4 "Manrope", sans-serif; }
.calculator-control-heading output { flex: 0 0 auto; padding: 8px 12px; color: var(--calculator-accent); background: #e7f2f1; border-radius: 10px; font-size: 13px; font-weight: 800; }
.calculator-control input[type="range"] { --range-progress: 0%; width: 100%; height: 38px; margin: 0; display: block; appearance: none; background: transparent; cursor: pointer; outline: none; }
.calculator-control input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(to right, #005a5b 0%, #005a5b var(--range-progress), #dde7e5 var(--range-progress), #dde7e5 100%); border-radius: 999px; transition: background .18s ease; }
.calculator-control input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -9px; appearance: none; background: white; border: 3px solid #005a5b; border-radius: 50%; box-shadow: 0 4px 11px rgba(0,90,91,.24); transition: transform .16s ease, box-shadow .16s ease; }
.calculator-control input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.07); box-shadow: 0 5px 14px rgba(0,90,91,.28); }
.calculator-control input[type="range"]:focus-visible::-webkit-slider-thumb { transform: scale(1.07); box-shadow: 0 0 0 5px rgba(0,90,91,.12), 0 4px 11px rgba(0,90,91,.24); }
.calculator-control input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.calculator-control input[type="range"]::-moz-range-track { height: 6px; background: #dde7e5; border-radius: 999px; }
.calculator-control input[type="range"]::-moz-range-progress { height: 6px; background: #005a5b; border-radius: 999px; }
.calculator-control input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: white; border: 3px solid #005a5b; border-radius: 50%; box-shadow: 0 4px 11px rgba(0,90,91,.24); transition: transform .16s ease, box-shadow .16s ease; }
.calculator-control input[type="range"]:hover::-moz-range-thumb { transform: scale(1.07); box-shadow: 0 5px 14px rgba(0,90,91,.28); }
.calculator-control input[type="range"]:focus-visible::-moz-range-thumb { transform: scale(1.07); box-shadow: 0 0 0 5px rgba(0,90,91,.12), 0 4px 11px rgba(0,90,91,.24); }
.calculator-control input[type="range"]:active::-moz-range-thumb { transform: scale(1.12); }
.calculator-range-scale { margin-top: 3px; display: flex; justify-content: space-between; color: #839193; font-size: 10px; }
.calculator-control > p { margin: 13px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.calculator-results { padding: 34px; background: rgba(255,255,255,.45); }
.calculator-results-label { margin: 0 0 16px; color: var(--calculator-accent); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.calculator-results-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.calculator-result { min-width: 0; min-height: 176px; padding: 23px; display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 14px; background: white; border: 1px solid rgba(0,90,91,.07); border-radius: 18px; box-shadow: 0 10px 28px rgba(7,63,72,.045); }
.calculator-result-primary { grid-column: 1 / -1; min-height: 166px; align-items: center; }
.calculator-result-icon { width: 43px; height: 43px; display: grid; place-items: center; color: var(--calculator-accent); background: #e7f2f1; border-radius: 13px; }
.calculator-result-icon svg { width: 23px; height: 23px; }
.calculator-result h3 { margin-bottom: 9px; color: var(--petrol); font-size: 13px; line-height: 1.35; }
.calculator-result strong { display: block; margin-bottom: 9px; color: var(--calculator-accent); font: 800 clamp(26px, 2.35vw, 35px)/1 "Manrope", sans-serif; letter-spacing: -.045em; white-space: nowrap; }
.calculator-result-primary strong { font-size: clamp(34px, 3vw, 45px); }
.calculator-result p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.calculator-disclaimer { max-width: 950px; margin: 23px auto 0; color: #6f7e80; text-align: center; font-size: 11px; line-height: 1.6; }
.calculator-action { margin-top: 30px; display: flex; justify-content: center; }
.calculator-action .button { min-width: 240px; }

.package-recommendations { padding: 104px 0 110px; background: #f6f3ed; }
.recommendation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.recommendation-card { min-height: 190px; padding: 30px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 22px; background: white; border: 1px solid rgba(7,63,72,.07); border-radius: 21px; box-shadow: 0 13px 34px rgba(7,63,72,.05); }
.recommendation-card > span { width: 64px; height: 64px; display: grid; place-items: center; color: var(--green-dark); background: #eef6ee; border-radius: 19px; }
.recommendation-card svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.recommendation-card h3 { margin-bottom: 9px; color: var(--petrol); font-size: 18px; }
.recommendation-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.62; }

.guarantee-section { padding: 110px 0; background: #f7f8f7; scroll-margin-top: 104px; }
.guarantee-shell { max-width: 1080px; margin-inline: auto; padding: 58px; background: white; border: 1px solid rgba(7,63,72,.08); border-radius: 30px; box-shadow: 0 20px 54px rgba(7,63,72,.07); }
.guarantee-heading { max-width: 790px; margin: 0 auto 42px; text-align: center; }
.guarantee-main-icon { width: 72px; height: 72px; margin: 0 auto 22px; display: grid; place-items: center; color: var(--green-dark); background: #edf6ed; border: 1px solid rgba(50,130,69,.12); border-radius: 22px; }
.guarantee-main-icon svg { width: 38px; height: 38px; }
.guarantee-heading .eyebrow { margin-bottom: 14px; }
.guarantee-heading .eyebrow::before { display: none; }
.guarantee-heading h2 { margin-bottom: 18px; color: var(--petrol); font-size: clamp(38px, 4.2vw, 53px); }
.guarantee-heading > p:last-child { max-width: 720px; margin: 0 auto; color: var(--muted); font-size: 15px; line-height: 1.75; }
.guarantee-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.guarantee-benefit { min-width: 0; padding: 27px 24px; text-align: center; background: #fbfcfb; border: 1px solid rgba(7,63,72,.075); border-radius: 20px; }
.guarantee-benefit > span { width: 52px; height: 52px; margin: 0 auto 18px; display: grid; place-items: center; color: var(--green-dark); background: #eaf4ea; border-radius: 16px; }
.guarantee-benefit svg { width: 27px; height: 27px; }
.guarantee-benefit h3 { margin-bottom: 9px; color: var(--petrol); font-size: 17px; }
.guarantee-benefit p { max-width: 245px; margin: 0 auto; color: var(--muted); font-size: 12px; line-height: 1.6; }
.guarantee-main-icon svg, .guarantee-benefit svg, .guarantee-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.guarantee-confidence { margin-top: 20px; padding: 25px 28px; text-align: center; background: #edf5f4; border: 1px solid rgba(0,90,91,.07); border-radius: 19px; }
.guarantee-confidence strong { display: block; margin-bottom: 7px; color: var(--petrol); font: 750 18px/1.4 "Manrope", sans-serif; }
.guarantee-confidence p { max-width: 680px; margin: 0 auto; color: var(--muted); font-size: 13px; line-height: 1.65; }
.guarantee-conditions { margin-top: 20px; overflow: hidden; border: 1px solid rgba(7,63,72,.1); border-radius: 17px; }
.guarantee-toggle { width: 100%; min-height: 62px; padding: 17px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--petrol); background: white; border: 0; cursor: pointer; text-align: left; font: 700 14px/1.4 "Manrope", sans-serif; }
.guarantee-toggle:hover { background: #fbfcfb; }
.guarantee-toggle:focus-visible { position: relative; z-index: 1; outline: 3px solid rgba(0,90,91,.18); outline-offset: -3px; }
.guarantee-toggle svg { width: 26px; height: 26px; padding: 5px; flex: 0 0 auto; color: var(--green-dark); background: #eef6ee; border-radius: 50%; transition: transform .24s ease; }
.guarantee-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.guarantee-panel { padding: 28px 30px 31px; border-top: 1px solid rgba(7,63,72,.08); background: #fcfdfc; }
.guarantee-panel[hidden] { display: none; }
.guarantee-panel h3 { margin-bottom: 20px; color: var(--petrol); font-size: 20px; }
.guarantee-panel p { max-width: 850px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.72; }
.guarantee-panel p + p { margin-top: 13px; }

.pricing-faq { background: white; }
.pricing-cta { padding: 0 0 100px; background: white; }
.pricing-cta-inner { position: relative; overflow: hidden; min-height: 270px; padding: 50px 55px; display: grid; grid-template-columns: auto 1fr .75fr; align-items: center; gap: 34px; color: white; background: linear-gradient(135deg, var(--petrol), #064e57); border-radius: 28px; box-shadow: 0 23px 60px rgba(7,63,72,.2); }
.pricing-cta-inner::after { content: ""; position: absolute; inset: auto -5% -125px; height: 230px; opacity: .2; background: repeating-radial-gradient(ellipse at 50% 110%, transparent 0 21px, rgba(88,173,88,.34) 22px 23px, transparent 24px 38px); }
.pricing-cta-inner > * { position: relative; z-index: 1; }
.pricing-cta-icon { width: 88px; height: 88px; display: grid; place-items: center; color: #8dd388; border: 1px solid rgba(125,204,119,.45); border-radius: 25px; background: rgba(125,204,119,.08); }
.pricing-cta-icon svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 1.75; }
.pricing-cta .eyebrow { margin-bottom: 11px; }
.pricing-cta h2 { margin-bottom: 10px; font-size: 37px; }
.selected-package { margin: 0; color: rgba(255,255,255,.7); font-size: 13px; }
.pricing-cta-actions { display: flex; flex-direction: column; gap: 15px; }
.pricing-cta-actions .button { width: 100%; }
.quote-trigger { border: 0; cursor: pointer; font-family: inherit; background: #005a5b; }
.quote-trigger svg { transition: transform .2s ease; }
.quote-trigger:hover { background: #004b4c; }
.quote-trigger:hover svg { transform: translateX(3px); }
.quote-trigger:focus-visible { outline: 4px solid rgba(125,204,119,.26); outline-offset: 4px; }

body.quote-modal-open { position: fixed; width: 100%; overflow: hidden; }
.quote-modal { position: fixed; inset: 0; z-index: 2000; padding: 24px; display: grid; place-items: center; pointer-events: none; }
.quote-modal[hidden] { display: none; }
.quote-modal-overlay { position: absolute; inset: 0; opacity: 0; background: rgba(3,26,31,.64); backdrop-filter: blur(5px); transition: opacity .2s ease; }
.quote-modal-dialog { position: relative; z-index: 1; width: min(100%, 560px); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; padding: 31px 32px 29px; color: var(--ink); background: #fbfcfa; border: 1px solid rgba(255,255,255,.7); border-radius: 26px; box-shadow: 0 30px 90px rgba(3,26,31,.28); opacity: 0; transform: scale(.975) translateY(8px); transition: opacity .2s ease, transform .2s ease; scrollbar-width: thin; scrollbar-color: rgba(0,90,91,.35) transparent; }
.quote-modal.is-open { pointer-events: auto; }
.quote-modal.is-open .quote-modal-overlay { opacity: 1; }
.quote-modal.is-open .quote-modal-dialog { opacity: 1; transform: scale(1) translateY(0); }
.quote-modal-handle { display: none; }
.quote-modal-header { margin-bottom: 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 18px; }
.quote-modal-header h2 { margin-bottom: 8px; color: var(--petrol); font-size: 30px; letter-spacing: -.035em; }
.quote-modal-header p { max-width: 430px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.quote-modal-close { width: 42px; height: 42px; display: grid; place-items: center; color: var(--petrol); background: #eef3f1; border: 1px solid rgba(7,63,72,.08); border-radius: 12px; cursor: pointer; transition: color .2s ease, background .2s ease, transform .2s ease; }
.quote-modal-close:hover { color: white; background: var(--petrol); transform: rotate(4deg); }
.quote-modal-close:focus-visible { outline: 4px solid rgba(0,90,91,.14); outline-offset: 3px; }
.quote-modal-close svg, .quote-counter svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.quote-form { display: grid; gap: 17px; }
.quote-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.quote-field > label, .quote-field > legend { display: block; margin-bottom: 8px; padding: 0; color: var(--petrol); font: 700 13px/1.4 "Manrope", sans-serif; }
.quote-field > input[type="text"] { width: 100%; height: 50px; padding: 0 15px; color: var(--ink); background: white; border: 1px solid rgba(7,63,72,.16); border-radius: 12px; outline: none; font: 500 14px/1 "DM Sans", sans-serif; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.quote-field > input[type="text"]::placeholder { color: #91a0a2; }
.quote-field > input[type="text"]:hover { border-color: rgba(0,90,91,.34); }
.quote-field > input[type="text"]:focus { background: #fff; border-color: #005a5b; box-shadow: 0 0 0 4px rgba(0,90,91,.1); }
.quote-field > input[aria-invalid="true"] { border-color: #a63d3d; box-shadow: 0 0 0 3px rgba(166,61,61,.08); }
.quote-error { min-height: 16px; margin: 5px 0 -5px; color: #9a3737; font-size: 11px; line-height: 1.4; }
.quote-counter { min-height: 54px; padding: 5px; display: grid; grid-template-columns: 44px minmax(70px, 1fr) 44px; align-items: center; gap: 8px; background: #eef3f1; border: 1px solid rgba(7,63,72,.08); border-radius: 14px; }
.quote-counter button { width: 44px; height: 42px; display: grid; place-items: center; color: var(--petrol); background: white; border: 1px solid rgba(0,90,91,.16); border-radius: 10px; cursor: pointer; transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease; }
.quote-counter button:hover:not(:disabled) { color: white; background: #005a5b; border-color: #005a5b; transform: translateY(-1px); }
.quote-counter button:focus-visible { outline: 4px solid rgba(0,90,91,.13); outline-offset: 2px; }
.quote-counter button:disabled { opacity: .38; cursor: not-allowed; }
.quote-counter output { color: var(--petrol); text-align: center; font: 800 21px/1 "Manrope", sans-serif; }
.quote-package-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.quote-package-option { position: relative; min-width: 0; cursor: pointer; }
.quote-package-option input { position: absolute; opacity: 0; pointer-events: none; }
.quote-package-option span { min-height: 45px; padding: 9px 12px; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--petrol); background: white; border: 1px solid rgba(0,90,91,.2); border-radius: 11px; text-align: center; font-size: 12px; font-weight: 700; transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.quote-package-option span:hover { background: #edf5f4; border-color: rgba(0,90,91,.45); }
.quote-package-option svg { width: 16px; height: 16px; display: none; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.quote-package-option input:checked + span { color: white; background: #005a5b; border-color: #005a5b; box-shadow: 0 8px 18px rgba(0,90,91,.16); }
.quote-package-option input:checked + span svg { display: block; }
.quote-package-option input:focus-visible + span { outline: 4px solid rgba(0,90,91,.14); outline-offset: 3px; }
.quote-submit { width: 100%; min-height: 54px; margin-top: 2px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: white; background: #005a5b; border: 0; border-radius: 13px; box-shadow: 0 13px 28px rgba(0,90,91,.2); cursor: pointer; font: 700 14px/1 "DM Sans", sans-serif; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.quote-submit:hover { background: #004b4c; transform: translateY(-2px); box-shadow: 0 17px 34px rgba(0,90,91,.26); }
.quote-submit:focus-visible { outline: 4px solid rgba(0,90,91,.16); outline-offset: 3px; }
.quote-submit svg { width: 21px; height: 21px; flex: 0 0 auto; fill: currentColor; stroke: none; }
.quote-privacy { margin: -5px 0 0; color: #76898c; text-align: center; font-size: 10px; line-height: 1.5; }

@media (max-width: 1050px) {
  .package-card { padding-inline: 22px; }
  .package-complete > span { width: 92px; }
  .pricing-cta-inner { grid-template-columns: auto 1fr; }
  .pricing-cta-actions { grid-column: 2; width: min(100%, 360px); }
  .savings-calculator-shell { grid-template-columns: 1fr; }
  .calculator-inputs { padding: 36px; }
}

@media (max-width: 900px) {
  .packages-grid { max-width: 680px; margin-inline: auto; grid-template-columns: 1fr; gap: 28px; }
  .package-card { padding: 38px 38px 31px; }
  .package-description { min-height: 0; }
  .package-products { height: 190px; }
  .package-products > span { width: 145px; height: 145px; }
  .package-complete > span { width: 128px; height: 140px; }
  .recommendation-grid { grid-template-columns: 1fr; }
  .recommendation-card { min-height: 0; }
  .guarantee-shell { padding: 46px 36px; }
  .guarantee-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guarantee-benefit:last-child { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .pricing-hero { padding: 58px 0 132px; text-align: left; }
  .pricing-hero .eyebrow::before { display: inline-block; }
  .pricing-hero h1 { font-size: 45px; }
  .pricing-hero-inner > p:not(.eyebrow) { font-size: 16px; }
  .pricing-trust { align-items: stretch; justify-content: flex-start; flex-direction: column; }
  .pricing-trust span { width: max-content; }
  .packages-section { padding-bottom: 82px; }
  .package-card { padding: 35px 24px 27px; }
  .package-products { height: 185px; }
  .package-products > span { width: 165px; height: 165px; }
  .package-basic > span { width: 185px; height: 185px; }
  .package-complete > span { width: 120px; height: 145px; }
  .package-price strong { font-size: 34px; }
  .comparison-section { padding: 78px 0 85px; }
  .comparison-hint { position: sticky; left: 16px; display: flex; align-items: center; gap: 5px; width: max-content; margin: 0; padding: 10px 0 12px; color: var(--muted); font-size: 10px; }
  .comparison-hint svg { width: 13px; height: 13px; flex: 0 0 auto; }
  .savings-calculator { padding: 82px 0 86px; }
  .savings-calculator-heading { margin-bottom: 34px; text-align: left; }
  .savings-calculator-heading .eyebrow::before { display: inline-block; }
  .savings-calculator-heading h2 { font-size: 38px; }
  .savings-calculator-shell { padding: 12px; gap: 12px; border-radius: 24px; }
  .calculator-inputs, .calculator-results { padding: 27px 21px; border-radius: 18px; }
  .calculator-panel-heading { margin-bottom: 33px; }
  .calculator-panel-heading > span { width: 48px; height: 48px; }
  .calculator-panel-heading h3 { font-size: 18px; }
  .calculator-control-heading { flex-direction: column; gap: 11px; }
  .calculator-control-heading label { max-width: none; }
  .calculator-control-heading output { align-self: flex-start; }
  .calculator-results-grid { grid-template-columns: 1fr; }
  .calculator-result, .calculator-result-primary { grid-column: auto; min-height: 0; padding: 21px 19px; }
  .calculator-result strong, .calculator-result-primary strong { font-size: 31px; }
  .calculator-disclaimer { margin-top: 20px; padding-inline: 8px; text-align: left; }
  .calculator-action { margin-top: 26px; }
  .calculator-action .button { width: 100%; }
  .package-recommendations { padding: 80px 0; }
  .recommendation-card { padding: 25px 22px; gap: 16px; }
  .recommendation-card > span { width: 55px; height: 55px; border-radius: 17px; }
  .guarantee-section { padding: 80px 0; }
  .guarantee-shell { padding: 34px 20px; border-radius: 24px; }
  .guarantee-heading { margin-bottom: 32px; text-align: left; }
  .guarantee-main-icon { width: 62px; height: 62px; margin: 0 0 20px; border-radius: 19px; }
  .guarantee-main-icon svg { width: 33px; height: 33px; }
  .guarantee-heading .eyebrow::before { display: inline-block; }
  .guarantee-heading h2 { font-size: 37px; }
  .guarantee-heading > p:last-child { font-size: 14px; }
  .guarantee-benefits { grid-template-columns: 1fr; }
  .guarantee-benefit:last-child { grid-column: auto; }
  .guarantee-confidence { padding: 23px 19px; text-align: left; }
  .guarantee-confidence strong { font-size: 17px; }
  .guarantee-toggle { min-height: 64px; padding-inline: 17px; }
  .guarantee-panel { padding: 24px 19px 27px; }
  .pricing-cta { padding-bottom: 75px; }
  .pricing-cta-inner { width: calc(100% - 24px); padding: 36px 23px; grid-template-columns: 1fr; gap: 23px; }
  .pricing-cta-icon { width: 68px; height: 68px; }
  .pricing-cta h2 { font-size: 32px; }
  .pricing-cta-actions { grid-column: 1; width: 100%; }
  .quote-modal { padding: 10px 8px 0; place-items: end center; }
  .quote-modal-dialog { width: 100%; max-height: 92dvh; padding: 15px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; transform: translateY(30px); }
  .quote-modal.is-open .quote-modal-dialog { transform: translateY(0); }
  .quote-modal-handle { width: 42px; height: 4px; margin: 0 auto 17px; display: block; background: #c8d3d1; border-radius: 999px; }
  .quote-modal-header { margin-bottom: 21px; }
  .quote-modal-header h2 { font-size: 27px; }
  .quote-modal-header p { font-size: 12px; }
  .quote-modal-close { width: 40px; height: 40px; }
  .quote-form { gap: 15px; }
  .quote-field > input[type="text"] { height: 49px; font-size: 16px; }
  .quote-package-option span { min-height: 46px; padding-inline: 8px; }
  .quote-submit { min-height: 55px; }
}

@media (prefers-reduced-motion: reduce) {
  .quote-modal-overlay, .quote-modal-dialog, .quote-modal-close, .quote-counter button, .quote-package-option span, .quote-submit, .package-button, .package-button svg, .quote-trigger svg { transition-duration: .01ms !important; }
}

/* Recursos */
.resources-page { background: #fbfaf7; }
.resources-page .site-header { background: rgba(255,255,255,.96); }
.resources-hero { position: relative; overflow: hidden; padding: 50px 0 68px; background: linear-gradient(115deg, #fff 0%, #fff 53%, #f3f0e9 100%); }
.resources-hero::before { content: ""; position: absolute; width: 430px; height: 430px; left: -315px; bottom: -250px; border: 1px solid rgba(88,173,88,.13); border-radius: 50%; box-shadow: 0 0 0 28px rgba(88,173,88,.024), 0 0 0 56px rgba(88,173,88,.018); }
.resources-hero-grid { position: relative; display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: 78px; }
.resources-hero-copy { padding-block: 22px; }
.resources-hero-copy h1 { margin-bottom: 20px; color: var(--petrol); font-size: clamp(58px, 6vw, 76px); line-height: .98; }
.resources-hero-copy > p:not(.eyebrow) { max-width: 650px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.72; }
.resources-hero-visual { position: relative; min-height: 320px; overflow: hidden; background: var(--petrol); border: 1px solid rgba(255,255,255,.4); border-radius: 30px; box-shadow: 0 25px 65px rgba(7,63,72,.15); isolation: isolate; }
.resources-hero-visual::before { content: ""; position: absolute; inset: 0; opacity: .42; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 34px 34px; }
.resources-hero-visual::after { content: ""; position: absolute; width: 190px; height: 190px; right: -80px; top: -85px; background: rgba(88,173,88,.13); border-radius: 50%; filter: blur(2px); }
.knowledge-orbit { position: absolute; left: 50%; top: 48%; border: 1px solid rgba(154,216,153,.23); border-radius: 50%; transform: translate(-50%, -50%); }
.knowledge-orbit-one { width: 225px; height: 225px; }
.knowledge-orbit-two { width: 150px; height: 150px; border-style: dashed; }
.knowledge-core { position: absolute; z-index: 2; left: 50%; top: 48%; width: 82px; height: 82px; display: grid; place-items: center; color: white; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); border-radius: 25px; box-shadow: 0 20px 42px rgba(2,36,42,.3); transform: translate(-50%, -50%); backdrop-filter: blur(10px); }
.knowledge-core svg { width: 39px; height: 39px; }
.knowledge-node { position: absolute; z-index: 2; width: 48px; height: 48px; display: grid; place-items: center; color: #a8dfa5; background: #0c535b; border: 1px solid rgba(168,223,165,.35); border-radius: 16px; box-shadow: 0 12px 24px rgba(2,36,42,.25); }
.knowledge-node svg { width: 23px; height: 23px; }
.knowledge-node-energy { left: calc(50% - 138px); top: 50px; }
.knowledge-node-eco { right: calc(50% - 138px); top: 82px; }
.knowledge-node-tech { right: calc(50% - 105px); bottom: 48px; }
.knowledge-label { position: absolute; z-index: 2; left: 50%; bottom: 18px; padding: 9px 13px; display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.78); background: rgba(2,36,42,.42); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; transform: translateX(-50%); white-space: nowrap; font-size: 10px; font-weight: 700; letter-spacing: .06em; backdrop-filter: blur(10px); }
.knowledge-label span { width: 7px; height: 7px; background: #83d27d; border-radius: 50%; box-shadow: 0 0 0 4px rgba(131,210,125,.12); }

.resources-categories { padding: 22px 0; background: white; border-block: 1px solid rgba(7,63,72,.075); }
.resources-category-list { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 11px; }
.resources-category-list > span { padding: 9px 14px; display: inline-flex; align-items: center; gap: 8px; color: var(--petrol-soft); background: #f7f9f7; border: 1px solid rgba(7,63,72,.09); border-radius: 999px; font-size: 12px; font-weight: 600; }
.resources-category-list svg { width: 16px; height: 16px; color: var(--green-dark); }

.resources-library { padding: 102px 0 110px; background: #fbfaf7; }
.resources-intro { margin-bottom: 48px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: end; gap: 80px; }
.resources-intro h2 { max-width: 670px; margin: 0; color: var(--petrol); font-size: clamp(38px, 4.3vw, 54px); }
.resources-intro > p { max-width: 530px; margin: 0 0 4px; color: var(--muted); line-height: 1.75; }
.resource-featured { min-height: 430px; overflow: hidden; display: grid; grid-template-columns: 1.06fr .94fr; background: white; border: 1px solid rgba(7,63,72,.08); border-radius: 28px; box-shadow: 0 20px 55px rgba(7,63,72,.08); }
.resource-featured-copy { padding: 52px 50px 48px; display: flex; align-items: flex-start; flex-direction: column; }
.resource-category { margin: 0 0 18px; color: var(--green-dark); font: 800 11px/1.2 "Manrope", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.resource-featured h3 { max-width: 630px; margin-bottom: 20px; color: var(--petrol); font-size: clamp(31px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -.04em; }
.resource-featured-copy > p:not(.resource-category) { max-width: 650px; margin-bottom: 32px; color: var(--muted); font-size: 16px; line-height: 1.72; }
.resource-read { margin-top: auto; display: inline-flex; align-items: center; gap: 11px; color: var(--petrol); font-weight: 700; transition: color .2s ease, gap .2s ease; }
.resource-read svg { width: 19px; height: 19px; }
.resource-read:hover { gap: 15px; color: var(--green-dark); }
.resource-read:focus-visible { outline: 3px solid rgba(50,130,69,.2); outline-offset: 5px; border-radius: 3px; }
.resource-read[aria-disabled="true"] { cursor: default; }
.resource-featured-visual { position: relative; min-height: 430px; overflow: hidden; display: grid; place-items: center; background: var(--petrol-deep); }
.resource-featured-visual::before { content: ""; position: absolute; width: 430px; height: 430px; border: 1px solid rgba(125,204,119,.16); border-radius: 50%; box-shadow: 0 0 0 32px rgba(125,204,119,.035), 0 0 0 64px rgba(125,204,119,.025); }
.energy-panel { position: relative; z-index: 2; width: min(76%, 340px); padding: 23px; color: white; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 22px; box-shadow: 0 24px 55px rgba(0,0,0,.22); backdrop-filter: blur(12px); transform: rotate(-2deg); }
.energy-panel-header { padding-bottom: 16px; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.7); border-bottom: 1px solid rgba(255,255,255,.12); font-size: 11px; font-weight: 700; }
.energy-panel-header i { width: 8px; height: 8px; background: #83d27d; border-radius: 50%; box-shadow: 0 0 0 5px rgba(131,210,125,.12); }
.energy-panel-body { padding: 20px 0 17px; display: flex; align-items: center; gap: 18px; }
.energy-gauge { width: 80px; height: 80px; display: grid; place-items: center; flex: 0 0 auto; background: conic-gradient(#78ca74 0 72%, rgba(255,255,255,.13) 72% 100%); border-radius: 50%; }
.energy-gauge::before { content: ""; position: absolute; width: 58px; height: 58px; background: #124f57; border-radius: 50%; }
.energy-gauge span { position: relative; z-index: 1; display: grid; place-items: center; }
.energy-gauge svg { width: 26px; height: 26px; color: #9edb9a; }
.energy-summary strong, .energy-summary small { display: block; }
.energy-summary strong { max-width: 160px; margin-bottom: 7px; font: 700 17px/1.25 "Manrope", sans-serif; }
.energy-summary small { color: rgba(255,255,255,.55); font-size: 9px; line-height: 1.5; }
.energy-bars { height: 43px; display: flex; align-items: end; gap: 7px; }
.energy-bars i { flex: 1; background: rgba(125,204,119,.42); border-radius: 3px 3px 1px 1px; }
.energy-bars i:nth-child(1) { height: 72%; }
.energy-bars i:nth-child(2) { height: 46%; }
.energy-bars i:nth-child(3) { height: 83%; }
.energy-bars i:nth-child(4) { height: 58%; }
.energy-bars i:nth-child(5) { height: 39%; }
.energy-bars i:nth-child(6) { height: 50%; }
.energy-bars i:nth-child(7) { height: 30%; background: #83d27d; }
.energy-chip { position: absolute; z-index: 3; padding: 10px 13px; display: flex; align-items: center; gap: 8px; color: var(--petrol); background: white; border-radius: 12px; box-shadow: 0 15px 30px rgba(0,0,0,.2); font-size: 10px; font-weight: 700; }
.energy-chip svg { width: 17px; height: 17px; color: var(--green-dark); }
.energy-chip-one { left: 9%; top: 18%; transform: rotate(-4deg); }
.energy-chip-two { right: 7%; bottom: 15%; transform: rotate(3deg); }

.resource-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 24px; }
.resource-card { position: relative; min-height: 640px; overflow: hidden; display: grid; grid-template-rows: minmax(380px, 1fr) 250px; background: white; border: 1px solid rgba(7,63,72,.08); border-radius: 25px; box-shadow: 0 14px 35px rgba(7,63,72,.055); }
.resource-card-copy { min-width: 0; padding: 38px 38px 34px; display: flex; align-items: flex-start; flex-direction: column; }
.resource-card-icon { width: 58px; height: 58px; margin-bottom: 29px; display: grid; place-items: center; color: var(--green-dark); background: #eaf3e9; border-radius: 18px; }
.resource-card-icon svg { width: 28px; height: 28px; }
.resource-card .resource-category { margin-bottom: 13px; }
.resource-card h3 { max-width: 490px; margin-bottom: 15px; color: var(--petrol); font-size: 25px; line-height: 1.22; letter-spacing: -.03em; }
.resource-card-copy > p:not(.resource-category) { max-width: 510px; margin-bottom: 25px; color: var(--muted); line-height: 1.65; }
.resource-card .resource-read { margin-top: auto; }
.resource-card-visual { position: relative; min-width: 0; min-height: 250px; overflow: hidden; display: grid; place-items: center; background: var(--petrol-deep); border-top: 1px solid rgba(7,63,72,.08); isolation: isolate; }
.resource-card-visual::before { content: ""; position: absolute; inset: 0; opacity: .45; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 28px 28px; }
.resource-card-visual::after { content: ""; position: absolute; width: 150px; height: 150px; right: -64px; top: -72px; background: rgba(88,173,88,.12); border-radius: 50%; }
.resource-visual-ring { position: absolute; width: 300px; height: 300px; left: 50%; top: 50%; border: 1px solid rgba(125,204,119,.13); border-radius: 50%; box-shadow: 0 0 0 26px rgba(125,204,119,.025), 0 0 0 52px rgba(125,204,119,.018); transform: translate(-50%, -50%); }
.resource-visual-panel { position: relative; z-index: 2; width: min(78%, 390px); min-height: 190px; padding: 18px; color: white; background: rgba(255,255,255,.095); border: 1px solid rgba(255,255,255,.2); border-radius: 19px; box-shadow: 0 20px 46px rgba(0,0,0,.22); backdrop-filter: blur(10px); }
.resource-visual-header { padding-bottom: 12px; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.68); border-bottom: 1px solid rgba(255,255,255,.12); font-size: 10px; font-weight: 700; }
.resource-visual-header i { width: 7px; height: 7px; background: #83d27d; border-radius: 50%; box-shadow: 0 0 0 4px rgba(131,210,125,.12); }
.climate-panel { transform: rotate(-1.5deg); }
.climate-panel-body { padding: 14px 0 12px; display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 15px; }
.temperature-control { min-height: 89px; display: flex; align-items: center; justify-content: center; flex-direction: column; background: rgba(2,36,42,.32); border: 1px solid rgba(255,255,255,.1); border-radius: 15px; }
.temperature-control span, .temperature-control small { color: rgba(255,255,255,.53); font-size: 8px; font-weight: 600; }
.temperature-control strong { margin: 4px 0 2px; font: 800 31px/.95 "Manrope", sans-serif; letter-spacing: -.05em; }
.climate-performance > span { display: block; margin-bottom: 4px; color: rgba(255,255,255,.55); font-size: 8px; font-weight: 600; }
.climate-performance svg { width: 100%; height: 68px; overflow: visible; }
.climate-performance path { fill: none; stroke: #8bd186; stroke-width: 2.5; stroke-linecap: round; }
.climate-performance .climate-area { fill: rgba(125,204,119,.12); stroke: none; }
.resource-visual-footer { display: flex; align-items: center; gap: 7px; }
.resource-visual-footer span { padding: 6px 8px; display: inline-flex; align-items: center; gap: 5px; color: rgba(255,255,255,.7); background: rgba(2,36,42,.3); border: 1px solid rgba(255,255,255,.09); border-radius: 999px; font-size: 8px; font-weight: 700; }
.resource-visual-footer svg { width: 12px; height: 12px; color: #9bdb97; }
.detection-panel { transform: rotate(1deg); }
.detection-comparison { padding: 13px 0 10px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.detection-technology { min-width: 0; display: grid; justify-items: center; text-align: center; }
.detection-technology strong { margin: 5px 0 2px; font: 700 11px/1.1 "Manrope", sans-serif; }
.detection-technology small { color: rgba(255,255,255,.48); font-size: 7px; white-space: nowrap; }
.detection-versus { color: rgba(255,255,255,.35); font: 800 8px/1 "Manrope", sans-serif; }
.detection-radar, .detection-pulse { position: relative; width: 68px; height: 68px; }
.detection-radar i { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(139,209,134,.45); border-radius: 50%; transform: translate(-50%, -50%); }
.detection-radar i:nth-child(1) { width: 22px; height: 22px; }
.detection-radar i:nth-child(2) { width: 43px; height: 43px; }
.detection-radar i:nth-child(3) { width: 64px; height: 64px; }
.detection-radar span { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; background: #8bd186; border: 2px solid rgba(255,255,255,.7); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 6px rgba(139,209,134,.12); }
.detection-pulse::before, .detection-pulse::after { content: ""; position: absolute; left: 50%; bottom: 10px; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.22); border-radius: 50% 50% 0 50%; transform: translateX(-50%) rotate(45deg); }
.detection-pulse::after { width: 27px; height: 27px; bottom: 20px; border-color: rgba(255,255,255,.36); }
.detection-pulse i { position: absolute; z-index: 1; left: 50%; top: 18px; width: 11px; height: 11px; background: rgba(255,255,255,.67); border-radius: 50%; transform: translateX(-50%); }
.detection-pulse span { position: absolute; z-index: 1; left: 50%; top: 31px; width: 17px; height: 27px; background: rgba(255,255,255,.38); border-radius: 9px 9px 5px 5px; transform: translateX(-50%); }
.detection-status { padding: 7px 9px; display: flex; align-items: center; justify-content: center; gap: 7px; color: rgba(255,255,255,.72); background: rgba(2,36,42,.3); border: 1px solid rgba(255,255,255,.09); border-radius: 999px; font-size: 8px; font-weight: 700; }
.detection-status span { width: 6px; height: 6px; background: #83d27d; border-radius: 50%; box-shadow: 0 0 0 4px rgba(131,210,125,.1); }

.resources-more { padding: 0 0 108px; background: #fbfaf7; }
.resources-more-heading { margin-bottom: 34px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: end; gap: 70px; }
.resources-more-heading h2 { max-width: 650px; margin: 0; color: var(--petrol); font-size: clamp(34px, 3.8vw, 46px); }
.resources-more-heading > p { max-width: 520px; margin: 0 0 4px; color: var(--muted); line-height: 1.72; }
.resources-more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 22px; }
.resources-more-card { position: relative; min-width: 0; min-height: 405px; overflow: hidden; padding: 32px 30px 29px; display: flex; align-items: flex-start; flex-direction: column; background: white; border: 1px solid rgba(7,63,72,.085); border-radius: 23px; box-shadow: 0 12px 31px rgba(7,63,72,.05); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.resources-more-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--green), rgba(88,173,88,.15)); }
.resources-more-card:hover { transform: translateY(-5px); border-color: rgba(50,130,69,.22); box-shadow: 0 18px 40px rgba(7,63,72,.075); }
.resources-more-card-icon { width: 54px; height: 54px; margin-bottom: 27px; display: grid; place-items: center; color: var(--green-dark); background: #eaf3e9; border-radius: 17px; }
.resources-more-card-icon svg { width: 26px; height: 26px; }
.resources-more-card .resource-category { margin-bottom: 12px; }
.resources-more-card h3 { margin-bottom: 15px; color: var(--petrol); font-size: 21px; line-height: 1.3; letter-spacing: -.025em; }
.resources-more-card > p:not(.resource-category) { margin-bottom: 25px; color: var(--muted); font-size: 14px; line-height: 1.68; }
.resources-more-card .resource-read { font-size: 14px; }

.resources-cta { padding: 88px 0; color: white; background: var(--petrol); }
.resources-cta-inner { display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 90px; }
.resources-cta h2 { max-width: 680px; margin-bottom: 15px; font-size: clamp(38px, 4vw, 50px); }
.resources-cta p:not(.eyebrow) { max-width: 690px; margin: 0; color: rgba(255,255,255,.7); font-size: 16px; line-height: 1.68; }
.resources-cta-actions { display: flex; flex-direction: column; gap: 12px; }
.resources-button-light { color: var(--petrol); background: white; box-shadow: 0 12px 28px rgba(2,36,42,.22); }
.resources-button-outline { color: white; border: 1px solid rgba(255,255,255,.32); }
.resources-cta .button:focus-visible { outline: 3px solid #9ad899; outline-offset: 4px; }

@media (max-width: 1050px) {
  .resources-hero-grid { gap: 48px; }
  .resources-intro { gap: 50px; }
  .resource-featured-copy { padding-inline: 40px; }
  .resources-cta-inner { gap: 55px; }
  .resources-more-heading { gap: 46px; }
  .resources-more-card { padding-inline: 25px; }
  .resources-more-card h3 { font-size: 19px; }
}

@media (max-width: 980px) {
  .resources-hero { padding: 56px 0 72px; }
  .resources-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .resources-hero-copy { max-width: 760px; padding: 0; }
  .resources-hero-visual { width: 100%; min-height: 300px; }
  .resources-intro { grid-template-columns: 1fr; gap: 18px; }
  .resources-intro > p { max-width: 680px; }
  .resource-featured { grid-template-columns: 1fr; }
  .resource-featured-visual { min-height: 360px; }
  .resources-more-heading { grid-template-columns: 1fr; gap: 16px; }
  .resources-more-heading > p { max-width: 680px; }
  .resources-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resources-more-card:last-child { grid-column: 1 / -1; width: calc(50% - 11px); justify-self: center; }
  .resources-cta-inner { grid-template-columns: 1fr; gap: 35px; }
  .resources-cta-actions { max-width: 420px; flex-direction: row; }
  .resources-cta-actions .button { flex: 1; }
}

@media (max-width: 700px) {
  .resources-hero { padding: 42px 0 54px; }
  .resources-hero-copy h1 { font-size: 49px; }
  .resources-hero-copy > p:not(.eyebrow) { font-size: 16px; }
  .resources-hero-visual { min-height: 255px; border-radius: 24px; }
  .knowledge-orbit-one { width: 190px; height: 190px; }
  .knowledge-orbit-two { width: 126px; height: 126px; }
  .knowledge-core { width: 70px; height: 70px; border-radius: 21px; }
  .knowledge-core svg { width: 33px; height: 33px; }
  .knowledge-node { width: 41px; height: 41px; border-radius: 14px; }
  .knowledge-node svg { width: 20px; height: 20px; }
  .knowledge-node-energy { left: calc(50% - 113px); top: 38px; }
  .knowledge-node-eco { right: calc(50% - 113px); top: 61px; }
  .knowledge-node-tech { right: calc(50% - 88px); bottom: 42px; }
  .knowledge-label { bottom: 12px; font-size: 9px; }
  .resources-categories { padding-block: 17px; }
  .resources-category-list { justify-content: flex-start; gap: 8px; }
  .resources-category-list > span { padding: 8px 11px; font-size: 11px; }
  .resources-library { padding: 78px 0 82px; }
  .resources-intro { margin-bottom: 34px; }
  .resources-intro h2 { font-size: 38px; }
  .resource-featured { min-height: 0; border-radius: 23px; }
  .resource-featured-copy { padding: 34px 25px 32px; }
  .resource-featured h3 { font-size: 30px; }
  .resource-featured-copy > p:not(.resource-category) { font-size: 15px; }
  .resource-featured-visual { min-height: 295px; }
  .energy-panel { width: min(78%, 300px); padding: 19px; }
  .energy-panel-body { gap: 13px; }
  .energy-gauge { width: 68px; height: 68px; }
  .energy-gauge::before { width: 49px; height: 49px; }
  .energy-summary strong { font-size: 14px; }
  .energy-chip { padding: 8px 10px; }
  .resource-grid { grid-template-columns: 1fr; gap: 18px; }
  .resource-card { min-height: 0; grid-template-rows: auto 250px; border-radius: 23px; }
  .resource-card-copy { min-height: 370px; padding: 30px 25px 28px; }
  .resource-card-icon { margin-bottom: 25px; }
  .resource-card h3 { font-size: 24px; }
  .resource-card-visual { min-height: 250px; }
  .resource-visual-panel { width: min(82%, 330px); }
  .resources-more { padding-bottom: 78px; }
  .resources-more-heading { margin-bottom: 28px; }
  .resources-more-heading h2 { font-size: 34px; }
  .resources-more-heading > p { font-size: 15px; }
  .resources-more-grid { grid-template-columns: 1fr; gap: 17px; }
  .resources-more-card, .resources-more-card:last-child { grid-column: auto; width: 100%; min-height: 360px; padding: 29px 25px 27px; }
  .resources-more-card h3 { font-size: 22px; }
  .resources-cta { padding: 72px 0; }
  .resources-cta h2 { font-size: 37px; }
  .resources-cta-actions { max-width: none; flex-direction: column; }
}

@media (max-width: 430px) {
  .resources-hero-visual { min-height: 235px; }
  .knowledge-label { padding-inline: 10px; }
  .resource-featured-visual { min-height: 270px; }
  .energy-chip-one { left: 5%; top: 10%; }
  .energy-chip-two { right: 4%; bottom: 9%; }
  .resource-card { grid-template-rows: minmax(424px, auto) 235px; }
  .resource-card-visual { min-height: 235px; }
  .resource-visual-panel { width: min(86%, 330px); min-height: 180px; padding: 16px; }
  .detection-comparison { gap: 7px; }
}

/* Artículos de Recursos */
.article-page { background: #fbfaf7; }
.article-page .site-header { background: rgba(255,255,255,.96); }
.article-hero { position: relative; overflow: hidden; padding: 54px 0 82px; background: linear-gradient(118deg, #fff 0%, #fff 56%, #f1f4ef 100%); }
.article-hero::before { content: ""; position: absolute; width: 390px; height: 390px; left: -300px; bottom: -265px; border: 1px solid rgba(88,173,88,.13); border-radius: 50%; box-shadow: 0 0 0 30px rgba(88,173,88,.025), 0 0 0 60px rgba(88,173,88,.018); }
.article-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr); align-items: center; gap: 76px; }
.article-hero-copy { min-width: 0; }
.article-category { margin: 0 0 18px; color: var(--green-dark); font: 800 11px/1.2 "Manrope", sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.article-hero h1 { max-width: 820px; margin-bottom: 24px; color: var(--petrol); font-size: clamp(43px, 5vw, 67px); line-height: 1.025; letter-spacing: -.05em; }
.article-lead { max-width: 760px; margin-bottom: 23px; color: var(--muted); font-size: 18px; line-height: 1.72; }
.article-reading { margin: 0; display: inline-flex; align-items: center; gap: 9px; color: #73868a; font-size: 12px; font-weight: 600; }
.article-reading svg { width: 17px; height: 17px; color: var(--green-dark); }
.article-hero-visual { position: relative; min-width: 0; min-height: 350px; overflow: hidden; display: grid; place-items: center; color: white; background: var(--petrol-deep); border: 1px solid rgba(255,255,255,.35); border-radius: 28px; box-shadow: 0 24px 62px rgba(7,63,72,.14); isolation: isolate; }
.article-hero-visual::before { content: ""; position: absolute; inset: 0; opacity: .43; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 30px 30px; }
.article-hero-visual::after { content: ""; position: absolute; width: 270px; height: 270px; border: 1px solid rgba(125,204,119,.14); border-radius: 50%; box-shadow: 0 0 0 28px rgba(125,204,119,.028), 0 0 0 56px rgba(125,204,119,.02); }
.article-dashboard { position: relative; z-index: 2; width: min(78%, 330px); padding: 21px; background: rgba(255,255,255,.095); border: 1px solid rgba(255,255,255,.2); border-radius: 21px; box-shadow: 0 22px 50px rgba(0,0,0,.22); backdrop-filter: blur(11px); transform: rotate(-1.5deg); }
.article-dashboard-header { padding-bottom: 15px; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.68); border-bottom: 1px solid rgba(255,255,255,.12); font-size: 10px; font-weight: 700; }
.article-dashboard-header i { width: 8px; height: 8px; background: #83d27d; border-radius: 50%; box-shadow: 0 0 0 5px rgba(131,210,125,.12); }
.article-energy-row { padding: 20px 0 17px; display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 17px; }
.article-energy-meter { width: 80px; height: 80px; display: grid; place-items: center; background: conic-gradient(#7dcc77 0 68%, rgba(255,255,255,.12) 68%); border-radius: 50%; }
.article-energy-meter::before { content: ""; position: absolute; width: 58px; height: 58px; background: #124f57; border-radius: 50%; }
.article-energy-meter svg { position: relative; z-index: 1; width: 27px; height: 27px; color: #a1dda0; }
.article-energy-copy strong, .article-energy-copy small { display: block; }
.article-energy-copy strong { margin-bottom: 6px; font: 700 16px/1.25 "Manrope", sans-serif; }
.article-energy-copy small { color: rgba(255,255,255,.53); font-size: 9px; line-height: 1.45; }
.article-mini-bars { height: 48px; display: flex; align-items: end; gap: 7px; }
.article-mini-bars i { flex: 1; background: rgba(125,204,119,.4); border-radius: 3px 3px 1px 1px; }
.article-mini-bars i:nth-child(1) { height: 82%; }
.article-mini-bars i:nth-child(2) { height: 64%; }
.article-mini-bars i:nth-child(3) { height: 73%; }
.article-mini-bars i:nth-child(4) { height: 52%; }
.article-mini-bars i:nth-child(5) { height: 40%; }
.article-mini-bars i:nth-child(6) { height: 29%; background: #83d27d; }
.article-temperature-row { padding: 20px 0 18px; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 15px; }
.article-temperature-value { min-height: 112px; display: grid; place-items: center; align-content: center; background: rgba(2,36,42,.32); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; }
.article-temperature-value span, .article-temperature-value small { color: rgba(255,255,255,.52); font-size: 8px; font-weight: 700; }
.article-temperature-value strong { margin: 5px 0 3px; font: 800 36px/.95 "Manrope", sans-serif; letter-spacing: -.06em; }
.article-temperature-scale { display: grid; gap: 9px; }
.article-temperature-scale > span { color: rgba(255,255,255,.54); font-size: 8px; font-weight: 700; }
.article-temperature-line { height: 7px; overflow: hidden; background: rgba(255,255,255,.11); border-radius: 999px; }
.article-temperature-line i { width: 68%; height: 100%; display: block; background: linear-gradient(90deg, rgba(125,204,119,.45), #83d27d); border-radius: inherit; }
.article-temperature-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.article-temperature-chips span { padding: 6px 8px; color: rgba(255,255,255,.67); background: rgba(2,36,42,.3); border: 1px solid rgba(255,255,255,.08); border-radius: 999px; font-size: 7px; font-weight: 700; }
.article-sensor-row { padding: 22px 0 17px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.article-sensor-unit { min-width: 0; display: grid; justify-items: center; text-align: center; }
.article-sensor-unit strong { margin: 8px 0 3px; font: 700 12px/1.1 "Manrope", sans-serif; }
.article-sensor-unit small { color: rgba(255,255,255,.5); font-size: 8px; }
.article-sensor-vs { color: rgba(255,255,255,.35); font: 800 9px/1 "Manrope", sans-serif; }
.article-radar-graphic, .article-pir-graphic { position: relative; width: 78px; height: 78px; }
.article-radar-graphic i { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(139,209,134,.5); border-radius: 50%; transform: translate(-50%, -50%); }
.article-radar-graphic i:nth-child(1) { width: 26px; height: 26px; }
.article-radar-graphic i:nth-child(2) { width: 49px; height: 49px; }
.article-radar-graphic i:nth-child(3) { width: 74px; height: 74px; }
.article-radar-graphic span { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; background: #8bd186; border: 2px solid rgba(255,255,255,.72); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 7px rgba(139,209,134,.12); }
.article-pir-graphic::before, .article-pir-graphic::after { content: ""; position: absolute; left: 50%; bottom: 9px; width: 54px; height: 54px; border: 1px solid rgba(255,255,255,.23); border-radius: 50% 50% 0 50%; transform: translateX(-50%) rotate(45deg); }
.article-pir-graphic::after { width: 31px; height: 31px; bottom: 21px; border-color: rgba(255,255,255,.38); }
.article-pir-graphic i { position: absolute; z-index: 1; left: 50%; top: 19px; width: 12px; height: 12px; background: rgba(255,255,255,.7); border-radius: 50%; transform: translateX(-50%); }
.article-pir-graphic span { position: absolute; z-index: 1; left: 50%; top: 34px; width: 18px; height: 30px; background: rgba(255,255,255,.4); border-radius: 9px 9px 5px 5px; transform: translateX(-50%); }
.article-sensor-status { padding: 8px 10px; display: flex; align-items: center; justify-content: center; gap: 7px; color: rgba(255,255,255,.7); background: rgba(2,36,42,.3); border: 1px solid rgba(255,255,255,.09); border-radius: 999px; font-size: 8px; font-weight: 700; }
.article-sensor-status span { width: 6px; height: 6px; background: #83d27d; border-radius: 50%; box-shadow: 0 0 0 4px rgba(131,210,125,.1); }

.article-main { background: #fbfaf7; }
.article-layout { width: min(calc(100% - 48px), 820px); padding: 88px 0 108px; }
.article-content { min-width: 0; }
.article-reader-shell { width: min(calc(100% - 48px), 820px); }
.article-reader-shell + .article-layout { padding-top: 38px; }
.article-reader { width: fit-content; max-width: 100%; margin: 0; padding: 7px; display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,.82); border: 1px solid rgba(7,63,72,.11); border-radius: 16px; box-shadow: 0 10px 28px rgba(7,63,72,.055); }
.article-reader[hidden], .article-reader-stop[hidden] { display: none; }
.article-reader button { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 11px; cursor: pointer; font: 700 13px/1 "DM Sans", sans-serif; transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.article-reader button:focus-visible { outline: 3px solid rgba(50,130,69,.24); outline-offset: 3px; }
.article-reader button svg { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.article-reader-main { color: white; background: var(--petrol); border: 1px solid var(--petrol); box-shadow: 0 7px 16px rgba(7,63,72,.13); }
.article-reader-main:hover { background: #005a5b; border-color: #005a5b; }
.article-reader[data-reader-state="paused"] .article-reader-main { color: var(--petrol); background: #eaf2ef; border-color: rgba(0,90,91,.14); box-shadow: none; }
.article-reader-stop { color: #536b6f; background: transparent; border: 1px solid transparent; }
.article-reader-stop:hover { color: var(--petrol); background: #eef3f1; border-color: rgba(7,63,72,.07); }
.article-reader-speed { flex: 0 0 auto; padding: 3px; display: inline-flex; align-items: center; gap: 2px; background: #edf3f1; border: 1px solid rgba(7,63,72,.08); border-radius: 11px; }
.article-reader .article-reader-speed-step { width: 40px; min-width: 40px; min-height: 40px; padding: 0; color: #60767a; background: transparent; border: 1px solid transparent; border-radius: 8px; box-shadow: none; }
.article-reader .article-reader-speed-step:hover:not(:disabled) { color: var(--petrol); background: rgba(255,255,255,.72); border-color: rgba(7,63,72,.06); }
.article-reader .article-reader-speed-step:disabled { color: #8da0a3; cursor: not-allowed; opacity: .42; }
.article-reader .article-reader-speed-step svg { width: 17px; height: 17px; }
.article-reader-speed-value { min-width: 48px; min-height: 16px; display: inline-grid; place-items: center; color: var(--petrol); font: 800 12px/1.2 "DM Sans", sans-serif; font-variant-numeric: tabular-nums; }
[data-read-block] { scroll-margin-top: 110px; transition: background-color .22s ease, box-shadow .22s ease; }
[data-read-block].is-reading { background: rgba(0,90,91,.055); border-radius: 8px; box-shadow: -6px 0 0 rgba(50,130,69,.72), 0 0 0 7px rgba(0,90,91,.035); }
.article-table tr.is-reading { box-shadow: none; }
.article-table tr.is-reading > * { background: #edf6f3; transition: background-color .22s ease; }
.article-content > p:first-child { font-size: 19px; line-height: 1.78; }
.article-content p { margin-bottom: 22px; color: #4f686d; font-size: 17px; line-height: 1.82; }
.article-content h2 { margin: 68px 0 22px; color: var(--petrol); font-size: clamp(30px, 3.3vw, 39px); line-height: 1.17; letter-spacing: -.035em; }
.article-content h3 { margin: 38px 0 15px; color: var(--petrol); font-size: 22px; line-height: 1.3; letter-spacing: -.02em; }
.article-content ul, .article-content ol { margin: 0 0 25px; padding-left: 24px; color: #4f686d; font-size: 17px; line-height: 1.72; }
.article-content li { padding-left: 5px; }
.article-content li + li { margin-top: 10px; }
.article-content strong { color: var(--ink); }
.article-content a:not(.button):not(.article-related-card) { color: var(--green-dark); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(50,130,69,.3); text-underline-offset: 4px; }
.article-content a:not(.button):not(.article-related-card):hover { color: var(--petrol); text-decoration-color: currentColor; }
.article-content a:focus-visible, .article-related-card:focus-visible, .article-back-link:focus-visible { outline: 3px solid rgba(50,130,69,.22); outline-offset: 4px; border-radius: 4px; }
.article-callout { margin: 38px 0 42px; padding: 28px 29px; display: grid; grid-template-columns: auto 1fr; gap: 19px; background: #edf4ed; border: 1px solid rgba(50,130,69,.12); border-radius: 20px; }
.article-callout-icon { width: 47px; height: 47px; display: grid; place-items: center; color: var(--green-dark); background: white; border-radius: 15px; box-shadow: 0 8px 20px rgba(7,63,72,.055); }
.article-callout-icon svg { width: 23px; height: 23px; }
.article-callout h3 { margin: 0 0 8px; font-size: 18px; }
.article-callout p { margin: 0; color: #526c70; font-size: 15px; line-height: 1.68; }
.article-inline-cta { margin: 48px 0 54px; padding: 31px 32px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; color: white; background: linear-gradient(135deg, var(--petrol), #075a61); border-radius: 22px; box-shadow: 0 18px 40px rgba(7,63,72,.12); }
.article-inline-cta h3 { margin: 0 0 8px; color: white; font-size: 22px; }
.article-inline-cta p { margin: 0; color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.6; }
.article-inline-cta .button { min-width: 210px; color: var(--petrol); background: white; }
.article-inline-cta .button svg { width: 18px; height: 18px; }
.article-table { margin: 35px 0 48px; overflow: hidden; border: 1px solid rgba(7,63,72,.11); border-radius: 18px; box-shadow: 0 10px 28px rgba(7,63,72,.045); }
.article-table table { width: 100%; border-collapse: collapse; table-layout: fixed; background: white; }
.article-table caption { padding: 18px 20px; color: var(--petrol); background: #edf4ed; font: 700 16px/1.35 "Manrope", sans-serif; text-align: left; }
.article-table th, .article-table td { padding: 17px 18px; border-bottom: 1px solid rgba(7,63,72,.09); vertical-align: top; text-align: left; overflow-wrap: anywhere; }
.article-table th { color: var(--petrol); background: #f7f9f6; font: 700 13px/1.4 "Manrope", sans-serif; }
.article-table td { color: #526b70; font-size: 13px; line-height: 1.55; }
.article-table th:first-child, .article-table td:first-child { width: 31%; color: var(--ink); font-weight: 700; }
.article-table tr:last-child td { border-bottom: 0; }
.article-faq { margin-top: 76px; padding-top: 68px; border-top: 1px solid rgba(7,63,72,.12); }
.article-faq > h2 { margin-top: 0; }
.article-page .faq-list { margin-top: 29px; }
.article-page .faq-list details { padding-inline: 24px; }
.article-page .faq-list summary { padding-block: 23px; font-size: 16px; }
.article-page .faq-list details p { margin: -3px 0 23px; padding-right: 35px; font-size: 15px; line-height: 1.7; }
.article-related { margin-top: 76px; padding-top: 68px; border-top: 1px solid rgba(7,63,72,.12); }
.article-related > h2 { margin-top: 0; }
.article-related-grid { margin-top: 27px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.article-related-card { min-width: 0; min-height: 210px; padding: 27px; display: flex; align-items: flex-start; flex-direction: column; background: white; border: 1px solid rgba(7,63,72,.09); border-radius: 19px; box-shadow: 0 10px 28px rgba(7,63,72,.045); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.article-related-card:hover { transform: translateY(-4px); border-color: rgba(50,130,69,.25); box-shadow: 0 16px 34px rgba(7,63,72,.08); }
.article-related-card small { margin-bottom: 13px; color: var(--green-dark); font: 800 10px/1.3 "Manrope", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.article-related-card strong { color: var(--petrol); font: 700 18px/1.35 "Manrope", sans-serif; }
.article-related-card span { margin-top: auto; padding-top: 24px; display: inline-flex; align-items: center; gap: 8px; color: var(--green-dark); font-size: 13px; font-weight: 700; }
.article-related-card svg { width: 17px; height: 17px; }
.article-final-cta { padding: 0 0 102px; background: #fbfaf7; }
.article-final-cta-inner { position: relative; overflow: hidden; padding: 58px 62px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 60px; color: white; background: var(--petrol-deep); border-radius: 28px; }
.article-final-cta-inner::after { content: ""; position: absolute; width: 320px; height: 320px; right: -175px; bottom: -225px; border: 1px solid rgba(125,204,119,.25); border-radius: 50%; box-shadow: 0 0 0 24px rgba(125,204,119,.035), 0 0 0 48px rgba(125,204,119,.025); }
.article-final-cta-inner > * { position: relative; z-index: 1; }
.article-final-cta h2 { max-width: 670px; margin-bottom: 13px; font-size: clamp(33px, 3.7vw, 45px); }
.article-final-cta p { max-width: 680px; margin: 0; color: rgba(255,255,255,.7); line-height: 1.65; }
.article-final-cta .button { min-width: 200px; }
.article-back { padding-top: 28px; text-align: center; }
.article-back-link { display: inline-flex; align-items: center; gap: 9px; color: var(--green-dark); font-size: 13px; font-weight: 700; }
.article-back-link svg { width: 17px; height: 17px; transform: rotate(180deg); }

@media (max-width: 980px) {
  .article-hero-grid { grid-template-columns: 1fr; gap: 42px; }
  .article-hero-copy { max-width: 820px; }
  .article-hero-visual { min-height: 330px; }
  .article-final-cta-inner { gap: 35px; }
}

@media (max-width: 700px) {
  .article-hero { padding: 39px 0 58px; }
  .article-hero h1 { margin-bottom: 19px; font-size: clamp(39px, 11.5vw, 52px); line-height: 1.04; }
  .article-lead { font-size: 16px; line-height: 1.66; }
  .article-hero-visual { min-height: 280px; border-radius: 23px; }
  .article-dashboard { width: min(82%, 320px); padding: 18px; }
  .article-layout { width: min(calc(100% - 32px), 820px); padding: 70px 0 82px; }
  .article-reader-shell { width: min(calc(100% - 32px), 820px); }
  .article-reader-shell + .article-layout { padding-top: 32px; }
  .article-reader { width: 100%; flex-wrap: wrap; }
  .article-reader-main { flex: 1 1 180px; }
  .article-reader-stop { flex: 0 1 auto; }
  .article-content > p:first-child { font-size: 17px; }
  .article-content p, .article-content ul, .article-content ol { font-size: 16px; line-height: 1.75; }
  .article-content h2 { margin-top: 55px; font-size: 30px; }
  .article-content h3 { font-size: 20px; }
  .article-callout { padding: 24px 22px; grid-template-columns: 1fr; gap: 15px; }
  .article-callout-icon { width: 43px; height: 43px; }
  .article-inline-cta { padding: 28px 24px; grid-template-columns: 1fr; gap: 22px; }
  .article-inline-cta .button { min-width: 0; }
  .article-table th, .article-table td { padding: 13px 9px; font-size: 12px; }
  .article-table caption { padding-inline: 14px; font-size: 14px; }
  .article-page .faq-list details { padding-inline: 19px; }
  .article-page .faq-list summary { padding-right: 31px; font-size: 14px; }
  .article-page .faq-list details p { padding-right: 8px; font-size: 14px; }
  .article-faq, .article-related { margin-top: 62px; padding-top: 56px; }
  .article-related-grid { grid-template-columns: 1fr; }
  .article-related-card { min-height: 185px; }
  .article-final-cta { padding-bottom: 78px; }
  .article-final-cta-inner { padding: 43px 25px; grid-template-columns: 1fr; gap: 28px; border-radius: 23px; }
  .article-final-cta .button { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .article-reader button, [data-read-block], .article-table tr.is-reading > * { transition: none; }
}

@media (max-width: 430px) {
  .article-hero-visual { min-height: 258px; }
  .article-dashboard { width: min(86%, 310px); }
  .article-energy-row { grid-template-columns: 70px 1fr; gap: 13px; }
  .article-energy-meter { width: 68px; height: 68px; }
  .article-energy-meter::before { width: 50px; height: 50px; }
  .article-temperature-row { gap: 10px; }
  .article-temperature-value strong { font-size: 32px; }
  .article-radar-graphic, .article-pir-graphic { transform: scale(.88); }
  .article-sensor-row { gap: 4px; }
  .article-table th, .article-table td { padding-inline: 7px; font-size: 11px; }
}