/* Tecrion Ingeniería y Proyectos — hoja de estilos */

:root {
  --ink: #161B26;
  --ink-2: #3A4252;
  --muted: #4A5263;
  --paper: #F3F2ED;
  --paper-2: #F8F7F3;
  --field: #FBFAF7;
  --rule: #C9CDD4;
  --accent: #004BAA;
  --accent-dark: #003A85;
  --gas: #C2571A;
  --clima: #2E7F6E;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --mono: 'IBM Plex Mono', Consolas, monospace;
  --sans: 'IBM Plex Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
  --gut: 56px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, figure, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
svg { max-width: 100%; }
[hidden] { display: none !important; }

.skip { position: absolute; left: -9999px; top: 8px; padding: 8px 12px; background: var(--ink); color: var(--paper); z-index: 50; }
.skip:focus { left: 8px; }

/* ---------- Hoja (marco de plano) ---------- */
.sheet { max-width: 1440px; margin: 0 auto; padding: 0 48px; }
.sheet-inner { min-height: 100vh; border-left: 1px solid var(--ink); border-right: 1px solid var(--ink); display: flex; flex-direction: column; }
main { flex: 1; display: flex; flex-direction: column; }

/* ---------- Tipografía ---------- */
.label { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; color: var(--accent); text-transform: uppercase; }
.label::before { content: ""; width: 48px; height: 1px; background: currentColor; flex-shrink: 0; }
.label--light { color: rgba(243, 242, 237, 0.6); }
.h1 { font-family: var(--display); font-weight: 600; font-size: clamp(46px, 5.8vw, 84px); line-height: 0.96; text-transform: uppercase; text-wrap: balance; }
.h2 { font-family: var(--display); font-weight: 600; font-size: clamp(36px, 3.9vw, 56px); line-height: 1; text-transform: uppercase; text-wrap: balance; }
.h3 { font-family: var(--display); font-weight: 600; font-size: 26px; line-height: 1.05; text-transform: uppercase; }
.lead { font-size: 20px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.text { font-size: 17px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.small { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.note { font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--muted); }
.accent { color: var(--accent); }
.muted { color: var(--muted); }
.tag { align-self: flex-start; display: inline-block; padding: 6px 10px; border: 1px solid var(--ink); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 28px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-family: var(--sans); font-size: 16px; font-weight: 500; cursor: pointer; text-decoration: none !important; transition: background-color 0.15s, color 0.15s; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { background: #2A3142; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn:disabled { opacity: 0.6; cursor: wait; }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* ---------- Cabecera ---------- */
.site-header { position: relative; height: 88px; padding: 0 var(--gut); display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--ink); }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none !important; }
.brand__logo { width: 36px; height: 36px; flex-shrink: 0; }
.brand__img { display: block; height: 52px; width: auto; }
.brand__text { display: flex; flex-direction: column; gap: 3px; }
.brand__name { font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; }
.brand__tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; }
.nav > a:not(.btn) { height: 40px; padding: 0 14px; display: flex; align-items: center; border: 1px solid var(--ink); background: transparent; }
.nav > a:not(.btn):hover { text-decoration: none; background: var(--paper-2); }
.nav > a[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.nav > a[aria-current="page"]:hover { background: var(--ink); }
.nav__cta { margin-left: 12px; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--ink); background: transparent; color: var(--ink); align-items: center; justify-content: center; cursor: pointer; }
.menu-toggle svg { width: 22px; height: 22px; }

/* ---------- Secciones ---------- */
.section { padding: 104px var(--gut); border-top: 1px solid var(--ink); }
.section--flush { border-top: 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px 64px; flex-wrap: wrap; margin-bottom: 56px; }
.section-head__main { display: flex; flex-direction: column; gap: 20px; }
.section-head__side { max-width: 460px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.link-mono { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; }
.link-mono svg { width: 16px; height: 16px; }

/* ---------- Portada ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 64px; align-items: center; padding: 88px var(--gut) 96px; }
.hero__text { display: flex; flex-direction: column; }
.hero__text .h1 { margin-top: 28px; }
.hero__text .lead { margin-top: 32px; max-width: 560px; }
.hero__text .actions { margin-top: 44px; }

.drawing { border: 1px solid var(--ink); background: var(--paper-2); display: flex; flex-direction: column; }
.drawing__svg { padding: 12px 8px 4px; }
.drawing__svg svg { display: block; width: 100%; height: auto; }
.drawing__legend { padding: 12px 20px; border-top: 1px solid var(--ink); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.drawing__legend span { display: flex; align-items: center; gap: 10px; }
.legend-line { width: 24px; height: 0; flex-shrink: 0; }
.plan-layer { animation: plan-in 0.9s ease both; }
@keyframes plan-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .plan-layer { animation: none; } html { scroll-behavior: auto; } }

/* Cajetín */
.title-block { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.title-block > div { padding: 10px 16px; border-right: 1px solid var(--ink); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.title-block > div:last-child { border-right: 0; }
.tb-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.tb-v { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.title-block--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.title-block--boxed { border: 1px solid var(--ink); background: var(--paper-2); }
.title-block--boxed > div { padding: 16px 20px; gap: 6px; }
.title-block--boxed .tb-k { font-size: 11px; }
.title-block--boxed .tb-v { font-size: 15px; }

/* Franja de normativa */
.norm { padding: 16px var(--gut); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; }
.norm__label { color: var(--accent); }
.norm__list { display: flex; flex-wrap: wrap; gap: 6px 32px; }

/* Tarjetas en rejilla */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); background: var(--paper-2); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { min-height: 300px; padding: 32px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); display: flex; flex-direction: column; gap: 12px; }
.cards--4 .card { min-height: 260px; padding: 28px; }
.card__top { display: flex; justify-content: space-between; align-items: center; }
.card__n { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.card__icon { width: 28px; height: 28px; }
.card .h3 { margin-top: 28px; }
.card--service .h3 { font-size: 30px; }
.card__link { margin-top: auto; padding-top: 12px; font-family: var(--mono); font-size: 13px; }

/* Franja asesoría energética */
.band { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 64px; align-items: center; }
.band__text { display: flex; flex-direction: column; gap: 20px; }
.checklist { border: 1px solid var(--ink); background: var(--paper-2); }
.checklist__row { padding: 20px 24px; border-bottom: 1px solid var(--ink); display: flex; gap: 16px; align-items: baseline; font-size: 17px; font-weight: 500; line-height: 1.4; }
.checklist__row span:first-child { font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--accent); }
.checklist__cta { padding: 24px; }
.checklist__cta .btn { width: 100%; }

/* Sobre mí */
.about { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 64px; }
.about__side { display: flex; flex-direction: column; gap: 20px; }
.years { margin: 4px 0 0; padding-left: 16px; border-left: 3px solid var(--accent); font-size: 18px; line-height: 1.5; }
.years strong { font-weight: 600; color: var(--accent); }
.about__main { display: flex; flex-direction: column; gap: 28px; }
.about__intro { font-size: 21px; line-height: 1.6; text-wrap: pretty; }
.exp { border: 1px solid var(--ink); background: var(--paper-2); }
.exp__head { display: block; padding: 12px 20px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); }
.exp__row { padding: 14px 20px; border-top: 1px solid var(--ink); display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.exp__row span:first-child { font-size: 17px; font-weight: 500; }
.exp__row span:last-child { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); text-align: right; }

/* Llamada a la acción oscura */
.cta { padding: 96px var(--gut); background-color: var(--ink); color: var(--paper); display: flex; justify-content: space-between; align-items: flex-end; gap: 40px 64px; flex-wrap: wrap; }
.cta__text { display: flex; flex-direction: column; gap: 24px; }
.cta__title { max-width: 820px; font-size: clamp(36px, 4.4vw, 64px); }
.cta__side { width: 320px; display: flex; flex-direction: column; gap: 16px; }
.cta__line { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 16px; color: var(--paper); }
.cta__line svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ---------- Pie ---------- */
.site-footer { padding: 48px var(--gut) 32px; border-top: 1px solid var(--ink); display: flex; flex-direction: column; gap: 20px; }
.site-footer .title-block { border: 1px solid var(--ink); background: var(--paper-2); }
.site-footer .title-block > div { padding: 16px 20px; gap: 6px; }
.site-footer .tb-k { font-size: 11px; }
.site-footer .tb-v { font-size: 15px; }
.site-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.site-footer__bottom nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
.site-footer__bottom nav a { padding: 4px 0; }

/* ---------- Cabecera de página interior ---------- */
.page-head { padding: 80px var(--gut) 64px; border-bottom: 1px solid var(--ink); display: flex; flex-direction: column; gap: 28px; }
.page-head__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 64px; flex-wrap: wrap; }
.page-head__row .h1 { max-width: 760px; font-size: clamp(46px, 5.5vw, 80px); }
.page-head__row p { max-width: 460px; }

/* ---------- Servicios ---------- */
.services-layout { padding: 64px var(--gut) 104px; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 64px; align-items: start; }
.services-aside { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 32px; }
.index { display: flex; flex-direction: column; }
.index__head { padding-bottom: 12px; border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); }
.index a { padding: 14px 0; border-bottom: 1px solid var(--rule); display: flex; gap: 14px; font-size: 15px; font-weight: 500; }
.index a span { font-family: var(--mono); font-size: 13px; color: var(--muted); font-weight: 400; }
.help-box { padding: 20px; border: 1px solid var(--ink); background: var(--paper-2); display: flex; flex-direction: column; gap: 12px; }
.help-box .h3 { font-size: 22px; }
.service { padding: 40px 0 56px; border-top: 1px solid var(--ink); scroll-margin-top: 24px; }
.service:last-child { border-bottom: 1px solid var(--ink); }
.service .h2 { margin-top: 16px; font-size: clamp(36px, 3.4vw, 48px); }
.service .lead { margin-top: 16px; max-width: 720px; font-size: 18px; }
.service__cols { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 48px; }
.col-head { display: block; margin-bottom: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); }
.bullets { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.bullets li { display: flex; gap: 12px; align-items: baseline; font-size: 16px; line-height: 1.5; }
.bullets li::before { content: ""; width: 8px; height: 8px; flex-shrink: 0; border: 1.5px solid var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--mono); font-size: 12px; }
.chips span { padding: 6px 10px; border: 1px solid var(--ink); }

/* ---------- Asesoría energética ---------- */
.hero--energy { grid-template-columns: minmax(0, 1fr) 540px; padding-top: 80px; padding-bottom: 88px; border-bottom: 1px solid var(--ink); }
.affiliation { display: flex; flex-direction: column; gap: 2px; }
.affiliation span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.affiliation strong { font-size: 15px; font-weight: 600; }
.chart-legend { padding: 12px 20px; border-top: 1px solid var(--ink); display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.chart-legend span { display: flex; align-items: center; gap: 8px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 48px; }
.step { padding-top: 24px; border-top: 1px solid var(--ink); display: flex; flex-direction: column; gap: 12px; }
.step__n { font-family: var(--display); font-weight: 600; font-size: 64px; line-height: 1; color: var(--accent); }

/* ---------- Formularios ---------- */
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 460px; border-top: 1px solid var(--ink); }
.form-layout--flush { border-top: 0; }
.form-col { padding: 72px var(--gut); border-right: 1px solid var(--ink); }
.form-aside { padding: 72px 48px; display: flex; flex-direction: column; gap: 40px; }
.form { display: flex; flex-direction: column; gap: 28px; }
.form__head { display: flex; flex-direction: column; gap: 16px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-size: 14px; font-weight: 500; padding: 0; }
.input { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 0; background: var(--field); color: var(--ink); font-family: var(--sans); font-size: 16px; -webkit-appearance: none; appearance: none; }
textarea.input { min-height: 160px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.input::placeholder { color: #8A919E; }
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.choice-group { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { min-height: 44px; padding: 0 16px; display: flex; align-items: center; border: 1px solid var(--ink); font-size: 15px; cursor: pointer; user-select: none; }
.choice input:checked + span { background: var(--ink); color: var(--paper); }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.dropzone { position: relative; min-height: 96px; padding: 16px 24px; border: 1px dashed var(--ink); background: var(--field); display: flex; align-items: center; gap: 20px; cursor: pointer; }
.dropzone:hover { border-style: solid; }
.dropzone input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.dropzone svg { width: 30px; height: 30px; flex-shrink: 0; color: var(--accent); }
.dropzone__text { display: flex; flex-direction: column; gap: 4px; }
.dropzone__text strong { font-size: 16px; font-weight: 500; }
.dropzone__hint, .dropzone__files { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.dropzone__files { color: var(--ink); overflow-wrap: anywhere; }
.dropzone__files.is-error { color: #A4261D; }
.checks { display: flex; flex-direction: column; gap: 14px; }
.check { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--ink); }
.check a { text-decoration: underline; }
.data-info { padding: 16px 20px; border: 1px solid var(--rule); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.data-info__head { margin-bottom: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); }
.data-info dl { margin: 0; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 16px; }
.data-info dt { font-weight: 500; color: var(--ink); }
.data-info dd { margin: 0; }
.data-info a { text-decoration: underline; }
.alert { padding: 14px 18px; border: 1px solid #A4261D; background: #FBEDEC; color: #7F1D16; font-size: 15px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn[type="submit"] { align-self: flex-start; }

.box { padding: 28px; border: 1px solid var(--ink); background: var(--paper-2); display: flex; flex-direction: column; gap: 14px; }
.list-block { display: flex; flex-direction: column; gap: 12px; }
.list-block .h3 { font-size: 24px; }
.faq { display: flex; flex-direction: column; }
.faq .h3 { font-size: 24px; padding-bottom: 12px; }
.faq__item { padding: 16px 0; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; }
.faq__item h4 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; }
.faq__item p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* Contacto */
.contact-rows { display: flex; flex-direction: column; }
.contact-row { padding: 20px 0; border-bottom: 1px solid var(--rule); display: flex; gap: 16px; }
.contact-row svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--accent); }
.contact-row div { display: flex; flex-direction: column; gap: 4px; }
.contact-row .tb-k { font-size: 11px; }
.contact-row strong { font-size: 18px; font-weight: 500; line-height: 1.4; }
.map-box { position: relative; height: 240px; border: 1px solid var(--ink); background-color: var(--paper-2); display: flex; align-items: flex-end; padding: 14px 16px; text-decoration: none !important; }
.map-box svg { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -44px 0 0 -36px; color: var(--accent); }
.map-box span { position: relative; padding: 6px 10px; background: var(--paper-2); border: 1px solid var(--ink); font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; }
.map-box:hover span { background: var(--ink); color: var(--paper); }

/* Páginas legales y de agradecimiento */
.legal { padding: 64px var(--gut) 104px; max-width: 920px; }
.legal h2 { margin: 48px 0 14px; font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1.1; text-transform: uppercase; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 12px 0 0; padding-left: 22px; }
.legal a { text-decoration: underline; }
.legal .title-block { margin-top: 8px; }
.thanks { padding: 120px var(--gut); display: flex; flex-direction: column; gap: 28px; max-width: 900px; }

/* ---------- Zona Feníe Energía ---------- */
.card__img { width: 64px; height: 64px; flex-shrink: 0; }
.fenie-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 64px; align-items: end; margin-bottom: 56px; }
.fenie-head__text { max-width: 620px; }
.fenie-brand { margin: 0; padding: 28px 40px; background: #FFFFFF; border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; }
.fenie-brand img { display: block; width: 230px; height: auto; }
.fenie-products { margin-top: 32px; border: 1px solid var(--ink); background: #FFFFFF; }
.fenie-products__head { margin: 0; padding: 14px 24px; border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); }
.fenie-products__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fenie-product { padding: 32px 16px 28px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; border-right: 1px solid var(--rule); }
.fenie-product:last-child { border-right: 0; }
.fenie-product img { width: 96px; height: 96px; }
.fenie-product span { font-size: 15px; font-weight: 500; line-height: 1.3; }
.box__brand { padding: 18px; background: #FFFFFF; border: 1px solid var(--rule); display: flex; justify-content: center; }
.box__brand img { display: block; width: 160px; height: auto; }

/* ---------- Adaptación a pantallas ---------- */
@media (min-width: 901px) and (max-width: 1240px) {
  .site-header { padding: 0 24px; gap: 16px; }
  .brand__tag { display: none; }
  .brand__img { height: 44px; }
  .nav { gap: 6px; font-size: 14px; }
  .nav > a:not(.btn) { height: 38px; padding: 0 11px; }
  .nav__cta { display: none; }
}

@media (max-width: 900px) {
  .site-header { padding: 0 20px 0 24px; }
  .menu-toggle { display: inline-flex; }
  .nav { display: none; position: absolute; top: 100%; left: -1px; right: -1px; z-index: 30; padding: 8px 24px 24px; background: var(--paper); border: 1px solid var(--ink); border-top: 0; flex-direction: column; align-items: stretch; gap: 0; font-size: 17px; }
  .nav-open .nav { display: flex; }
  .nav > a:not(.btn) { height: auto; padding: 14px 0; border: 0; border-bottom: 1px solid var(--rule); background: transparent; color: var(--ink); }
  .nav > a:not(.btn):hover { background: transparent; }
  .nav > a[aria-current="page"] { background: transparent; color: var(--accent); border-color: var(--rule); }
  .nav__cta { display: inline-flex; margin: 20px 0 0; }
  .hero, .hero--energy { grid-template-columns: minmax(0, 1fr); }
  .hero .drawing { max-width: 680px; }
  .band, .about { grid-template-columns: minmax(0, 1fr); }
  .band .checklist { max-width: 600px; }
  .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .fenie-head { grid-template-columns: minmax(0, 1fr); }
  .fenie-brand { justify-self: start; }
  :root { --gut: 32px; }
  .sheet { padding: 0 24px; }
  .section { padding-top: 80px; padding-bottom: 80px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .services-aside { position: static; }
  .service__cols { grid-template-columns: minmax(0, 1fr); }
  .form-layout { grid-template-columns: minmax(0, 1fr); }
  .form-col { border-right: 0; }
  .form-aside { border-top: 1px solid var(--ink); padding: 56px var(--gut); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .site-footer .title-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer .title-block > div:nth-child(2) { border-right: 0; }
  .site-footer .title-block > div:nth-child(-n+2) { border-bottom: 1px solid var(--ink); }
}

@media (max-width: 640px) {
  .fenie-head { margin-bottom: 28px; }
  .fenie-brand { padding: 20px 28px; }
  .fenie-brand img { width: 190px; }
  .fenie-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fenie-product { padding: 24px 12px 20px; border-bottom: 1px solid var(--rule); }
  .fenie-product:nth-child(2n) { border-right: 0; }
  .fenie-product:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .fenie-product img { width: 76px; height: 76px; }
  .card__img { width: 52px; height: 52px; }
  :root { --gut: 20px; }
  .sheet { padding: 0 12px; }
  .site-header { height: 64px; padding: 0 12px 0 16px; }
  .brand { gap: 10px; }
  .brand__logo { width: 28px; height: 28px; }
  .brand__img { height: 34px; }
  .brand__rest { display: block; margin-top: 3px; font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: 0.08em; color: var(--muted); }
  .brand__tag { display: none; }
  .label { font-size: 11px; gap: 10px; }
  .label::before { width: 32px; }
  .hero { padding: 40px var(--gut) 48px; gap: 40px; }
  .hero__text .h1 { margin-top: 20px; }
  .hero__text .lead { margin-top: 20px; font-size: 17px; }
  .hero__text .actions { margin-top: 28px; }
  .actions { flex-direction: column; align-items: stretch; }
  .btn { min-height: 52px; padding: 0 20px; }
  .drawing__legend { grid-template-columns: minmax(0, 1fr); font-size: 12px; padding: 12px 16px; }
  .title-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .title-block > div:nth-child(2n) { border-right: 0; }
  .title-block > div:nth-child(-n+2) { border-bottom: 1px solid var(--ink); }
  .title-block--3 { grid-template-columns: minmax(0, 1fr); }
  .title-block--3 > div { border-right: 0; border-bottom: 1px solid var(--ink); }
  .title-block--3 > div:last-child { border-bottom: 0; }
  .norm { flex-direction: column; align-items: flex-start; font-size: 12px; }
  .norm__list { display: flex; flex-wrap: wrap; gap: 6px 16px; }
  .section { padding-top: 56px; padding-bottom: 56px; }
  .section-head { margin-bottom: 28px; }
  .cards, .cards--4 { grid-template-columns: minmax(0, 1fr); }
  .card, .cards--4 .card { min-height: 0; padding: 24px 20px; }
  .card .h3, .card--service .h3 { margin-top: 12px; font-size: 24px; }
  .checklist__row { padding: 16px; font-size: 15px; }
  .checklist__cta { padding: 16px; }
  .years { font-size: 16px; }
  .about__intro { font-size: 17px; }
  .exp__row { flex-direction: column; gap: 4px; padding: 12px 16px; }
  .exp__row span:first-child { font-size: 16px; }
  .exp__row span:last-child { text-align: left; font-size: 11px; }
  .cta { padding: 56px var(--gut); }
  .cta__side { width: 100%; }
  .cta__line { min-height: 44px; }
  .page-head { padding: 48px var(--gut) 40px; }
  .services-layout { padding: 40px var(--gut) 56px; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .form-col { padding: 48px var(--gut); }
  .form .btn[type="submit"] { align-self: stretch; }
  .data-info dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .data-info dd { margin-bottom: 8px; }
  .site-footer { padding: 32px var(--gut) 28px; }
  .site-footer .title-block { grid-template-columns: minmax(0, 1fr); }
  .site-footer .title-block > div { border-right: 0; border-bottom: 1px solid var(--ink); }
  .site-footer .title-block > div:last-child { border-bottom: 0; }
  .site-footer__bottom nav a { padding: 12px 0; }
  .legal { padding: 40px var(--gut) 64px; }
  .thanks { padding: 64px var(--gut); }
}

/* ================================================================
   PIEL OSCURA — Tecrion 2026
   Mantiene la maquetación anterior y cambia color, textura y movimiento.
   ================================================================ */
:root{
  --ink:rgba(146,167,201,.20);     /* ahora es el color de las líneas */
  --rule:rgba(146,167,201,.14);
  --paper:#080C14;                 /* fondo general */
  --paper-2:#111A2A;               /* paneles */
  --field:#0A111C;
  --tx:#E9EEF7; --tx2:#A8B6CC; --tx3:#71809A;
  --ink-2:#A8B6CC; --muted:#71809A;
  --accent:#3D8BFF; --accent-dark:#1F6BE0; --accent-deep:#004BAA;
  --gas:#FF9D4D; --clima:#35D6B0; --steel:#92A7C9;
  --on-accent:#03142B;
  --e:cubic-bezier(.22,.61,.36,1);
}
html{background:var(--paper)}
body{background:var(--paper);color:var(--tx)}
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.sheet{padding:0 clamp(0px,2vw,40px)}
.sheet-inner{border-color:var(--ink)}
::selection{background:var(--accent);color:var(--on-accent)}

/* ---------- Tipografía ---------- */
.h1,.h2,.h3{color:var(--tx)}
.lead,.text,.small{color:var(--tx2)}
.note{color:var(--tx3)}
.accent{color:var(--accent)}
.label{color:var(--accent);font-size:11.5px;letter-spacing:.17em}
.label::before{transform-origin:left;transform:scaleX(0);transition:transform .8s var(--e) .1s}
.in .label::before,.label.lit::before,.hero__in .label::before,.page-head .label::before,.cta .label::before{transform:scaleX(1)}
.label--light{color:var(--accent)}
.tag{border-color:var(--clima);color:var(--clima);background:rgba(53,214,176,.08)}
.col-head,.tb-k,.index__head,.exp__head,.data-info__head,.affiliation span,.dropzone__hint{color:var(--tx3)}
.tb-v,.dropzone__files,.data-info dt,.exp__row span:first-child,.contact-row strong{color:var(--tx)}
.skip{background:var(--accent);color:var(--on-accent)}

/* ---------- Botones y enlaces ---------- */
.btn{border-color:var(--ink);color:var(--tx);position:relative;overflow:hidden;
  transition:color .3s var(--e),border-color .3s,transform .25s var(--e),box-shadow .3s}
.btn::before{content:"";position:absolute;inset:0;background:var(--tx);transform:translateY(101%);
  transition:transform .38s var(--e);z-index:0}
.btn>*{position:relative;z-index:1}
.btn:hover{color:var(--paper);border-color:var(--tx);transform:translateY(-2px)}
.btn:hover::before{transform:translateY(0)}
.btn--primary{background:linear-gradient(180deg,var(--accent),var(--accent-dark));border-color:transparent;
  color:var(--on-accent);box-shadow:0 8px 26px -12px rgba(61,139,255,.5)}
.btn--primary:hover{color:var(--on-accent)}
.btn--primary::before{background:var(--tx)}
.btn--dark{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn--dark:hover{background:var(--accent);color:var(--on-accent)}
.btn--ghost:hover{color:var(--paper)}
.link-mono{color:var(--accent);padding-bottom:3px;
  background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/100% 1px;transition:background-size .4s var(--e)}
.link-mono:hover{text-decoration:none;background-size:0 1px;background-position:100% 100%}
.link-mono svg{transition:transform .3s var(--e)}
.link-mono:hover svg{transform:translateX(4px)}
a:hover{text-decoration:none}

/* ---------- Cabecera ---------- */
.site-header{position:sticky;top:0;z-index:80;height:72px;background:rgba(8,12,20,.78);
  backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--ink)}
.brand__img{filter:brightness(0) invert(1);opacity:.95;height:42px}
.nav>a:not(.btn){border-color:transparent;color:var(--tx3);position:relative;transition:color .25s}
.nav>a:not(.btn)::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .32s var(--e)}
.nav>a:not(.btn):hover{background:transparent;color:var(--tx)}
.nav>a:not(.btn):hover::after{transform:scaleX(1)}
.nav>a[aria-current="page"]{background:transparent;border-color:transparent;color:var(--tx)}
.nav>a[aria-current="page"]::after{transform:scaleX(1)}
.menu-toggle{border-color:var(--ink);color:var(--tx)}

/* ---------- Barra de avance y raíl ---------- */
.prog{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;z-index:120;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent),var(--clima))}
.rail{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:70;display:flex;flex-direction:column;
  gap:14px;align-items:flex-end}
.rail a{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  color:var(--tx3);text-transform:uppercase;transition:color .3s}
.rail i{width:18px;height:1px;background:currentColor;transition:width .35s var(--e)}
.rail a span{opacity:0;transform:translateX(6px);transition:all .35s var(--e)}
.rail a:hover span,.rail a.on span{opacity:1;transform:none}
.rail a.on{color:var(--accent)} .rail a.on i{width:34px} .rail a:hover{color:var(--tx)}

/* ---------- Escena 3D de la portada ---------- */
.track{position:relative;height:400vh}
.scene{position:sticky;top:0;height:100vh;overflow:hidden;background:
  radial-gradient(1100px 760px at 74% 50%,rgba(61,139,255,.16),transparent 64%),
  radial-gradient(640px 480px at 4% 94%,rgba(53,214,176,.08),transparent 62%),
  linear-gradient(180deg,#080C14,#0C1320 60%,#080C14)}
.iso{position:absolute;right:0;top:0;bottom:0;width:56%;display:grid;place-items:center;
  perspective:1500px;perspective-origin:50% 42%}
.iso__stack{position:relative;width:min(38vw,60vh*1.111);transform-style:preserve-3d;will-change:transform}
.iso__stack::after{content:"";display:block;padding-top:90%}
.iso__pl{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.iso__pl svg{width:100%;height:auto}
.iso__pl::before{content:"";position:absolute;inset:-3% -2%;border:1px solid var(--ink);
  background:linear-gradient(145deg,rgba(18,27,43,.55),rgba(10,15,25,.25));opacity:0;transition:opacity .5s}
.iso__stack.open .iso__pl::before{opacity:1}
.iso [stroke="#161B26"]{stroke:#B6C4DC} .iso [fill="#F8F7F3"]{fill:rgba(16,24,38,.86)}
.iso [fill="#161B26"]{fill:#DCE5F3} .iso [fill="#4A5263"]{fill:#8CA0BF}
.iso [stroke="#C9CDD4"]{stroke:#222D44} .iso [stroke="#A9AEB7"]{stroke:#5B6A85}
.iso [stroke="#004BAA"]{stroke:var(--accent)} .iso [stroke="#C2571A"]{stroke:var(--gas)}
.iso [stroke="#2E7F6E"]{stroke:var(--clima)} .iso .plan-layer{animation:none}
.scene__ui{position:absolute;inset:0;z-index:3;pointer-events:none}
.scene__ui a,.scene__ui button{pointer-events:auto}
.stage{position:absolute;left:var(--gut);top:50%;transform:translateY(-50%);width:min(540px,42vw);perspective:1200px}
.hero__in{transform-origin:0% 100%;will-change:transform,opacity;display:flex;flex-direction:column}
.hero__in .h1{margin-top:20px;font-size:clamp(40px,5vw,74px)}
.hero__in .lead{margin-top:20px;max-width:46ch;font-size:clamp(16px,1.35vw,18.5px)}
.hero__in .actions{margin-top:28px}
.hero-chips{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.hero-chips span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx2);
  border:1px solid var(--ink);padding:6px 11px;background:rgba(17,26,42,.5)}
.h1 em{font-style:normal;background:linear-gradient(100deg,var(--accent),var(--clima));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.legend{position:absolute;right:var(--gut);bottom:30px;display:flex;flex-direction:column;gap:11px;align-items:flex-end;
  padding:18px 0 14px 50px}
.lay{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx3);transition:color .4s var(--e),transform .4s var(--e)}
.lay i{width:30px;height:0;border-top:2px solid currentColor;opacity:.4;transition:opacity .4s,border-color .4s}
.lay.on{color:var(--tx);transform:translateX(-5px)} .lay.on i{opacity:1}
.lay.on.c i{border-color:var(--clima)} .lay.on.g i{border-color:var(--gas)}
.lay.on.e i{border-color:var(--accent)} .lay.on.v i{border-color:var(--steel);border-top-style:dashed}
.hsteps{position:absolute;left:0;bottom:30px;width:min(470px,44vw);opacity:0;transform:translateY(26px);
  padding:16px var(--gut) 10px;will-change:transform,opacity}
.hstep{display:grid;grid-template-columns:36px 1fr;gap:14px;padding:7px 0;align-items:start}
.hstep__n{width:30px;height:30px;display:grid;place-items:center;font-family:var(--mono);font-size:11.5px;
  color:var(--tx3);border:1px solid var(--ink);transition:all .4s var(--e)}
.hstep__t{font-family:var(--display);font-size:16px;text-transform:uppercase;color:var(--tx3);align-self:center;
  transition:all .4s var(--e);margin:0}
.hstep__p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--e)}
.hstep__p>span{overflow:hidden;color:var(--tx2);font-size:14.5px;line-height:1.5;padding-left:13px;
  border-left:1px solid var(--ink);display:block}
.hstep.on .hstep__n{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.hstep.on .hstep__t{color:var(--tx);font-size:21px}
.hstep.on .hstep__p{grid-template-rows:1fr;margin-top:8px}
.cue{position:absolute;left:var(--gut);bottom:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tx3)}
.cue span{display:inline-block;padding-bottom:6px;
  background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/var(--cue,100%) 1px}

/* ---------- Cinta y cifras ---------- */
.tick{border-bottom:1px solid var(--ink);background:#0C1320;overflow:hidden;padding:13px 0}
.tick__in{display:flex;gap:46px;width:max-content;animation:tickslide 36s linear infinite}
.tick span{font-family:var(--mono);font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--tx3);
  display:flex;align-items:center;gap:46px;white-space:nowrap}
.tick span::after{content:"";width:5px;height:5px;background:var(--accent);transform:rotate(45deg)}
@keyframes tickslide{to{transform:translateX(-50%)}}
.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--ink)}
.fig{padding:30px clamp(16px,2.4vw,36px);border-right:1px solid var(--ink)}
.fig:last-child{border-right:0}
.fig b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(34px,4.2vw,58px);line-height:1;color:var(--tx)}
.fig b i{font-style:normal;color:var(--accent)}
.fig span{display:block;margin-top:9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx3)}

/* ---------- Tarjetas ---------- */
.cards{background:transparent;border-color:var(--ink);gap:1px;background-color:var(--ink)}
.card{background:var(--paper-2);position:relative;overflow:hidden;transition:background .4s var(--e),transform .4s var(--e)}
.card::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--c,var(--accent));
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e)}
a.card:hover{background:#16202F;transform:translateY(-3px);text-decoration:none}
a.card:hover::before{transform:scaleX(1)}
.card__n{color:var(--c,var(--accent))}
.card__icon{color:var(--c,var(--accent));width:30px;height:30px;transition:transform .45s var(--e)}
a.card:hover .card__icon{transform:translateY(-3px) rotate(-5deg)}
.card__link{color:var(--c,var(--accent))}
.card:nth-child(1){--c:var(--steel)} .card:nth-child(2){--c:var(--accent)}
.card:nth-child(3){--c:var(--gas)}   .card:nth-child(4){--c:var(--clima)}
.card:nth-child(5){--c:var(--steel)} .card:nth-child(6){--c:var(--accent)}

/* ---------- Paneles ---------- */
.drawing,.checklist,.exp,.help-box,.box,.title-block--boxed,.map-box,.form .input{background:var(--paper-2)}
.drawing{border-color:var(--ink)}
.drawing__legend,.chart-legend{color:var(--tx2);border-color:var(--ink)}
.checklist__row{border-color:var(--ink)}
.checklist__row span:first-child{color:var(--clima)}
.exp__row{border-color:var(--ink);transition:padding-left .3s var(--e),background .3s}
.exp__row:hover{padding-left:26px;background:rgba(61,139,255,.05)}
.service{border-color:var(--ink)} .service:last-child{border-bottom-color:var(--ink)}
.index a{border-color:var(--rule)} .index a:hover{color:var(--accent)}
.bullets li::before{border-color:var(--accent)}
.years{border-left-color:var(--accent)} .years strong{color:var(--accent)}
.step{border-color:var(--ink)} .step__n{color:var(--accent)}
.faq__item{border-color:var(--rule)} .faq__item p{color:var(--tx2)}
.contact-row{border-color:var(--rule)}
.contact-row svg{color:var(--accent);width:34px;height:34px;padding:7px;border:1px solid var(--ink);
  transition:all .3s var(--e)}
.contact-row:hover svg{border-color:var(--accent);background:rgba(61,139,255,.1)}
.map-box{border-color:var(--ink)} .map-box svg{color:var(--accent)}
.map-box span{background:var(--paper);border-color:var(--ink);color:var(--tx2)}
.map-box:hover span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.data-info{border-color:var(--rule);color:var(--tx2);background:var(--field)}
.legal p,.legal li{color:var(--tx2)}
.legal h2{color:var(--tx)}

/* ---------- Formularios ---------- */
.input{background:var(--field);border-color:var(--ink);color:var(--tx)}
.input::placeholder{color:var(--tx3)}
.input:focus{outline:none;border-color:var(--accent);background:#0C1320;box-shadow:0 0 0 3px rgba(61,139,255,.16)}
.field-label{color:var(--tx2)}
.choice span{border-color:var(--ink);color:var(--tx2)}
.choice input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.dropzone{border-color:var(--ink);background:var(--field)}
.dropzone:hover{border-color:var(--accent)}
.dropzone svg{color:var(--accent)}
.check input{accent-color:var(--accent)}
.alert{border-color:#C2564C;background:rgba(194,86,76,.12);color:#FFB3AB}
.dropzone__files.is-error{color:#FFB3AB}

/* ---------- Llamada final y pie ---------- */
.cta{background:radial-gradient(900px 420px at 18% 120%,rgba(61,139,255,.16),transparent 62%),#0C1320;
  color:var(--tx);border-top:1px solid var(--ink)}
.cta__title{color:var(--tx)}
.cta__line{color:var(--tx2)} .cta__line:hover{color:var(--tx)}
.cta__line svg{color:var(--accent)}
.site-footer{border-color:var(--ink)}
.site-footer .title-block{background:var(--paper-2);border-color:var(--ink)}
.site-footer__bottom{color:var(--tx3)}
.site-footer__bottom nav a:hover{color:var(--accent)}
.title-block,.title-block>div{border-color:var(--ink)}

/* ---------- Zona Feníe (el logo exige fondo blanco) ---------- */
.fenie-brand,.fenie-products,.box__brand{background:#FFFFFF;border-color:var(--ink)}
.fenie-products__head{color:#5A6373;border-color:#D3D0C7}
.fenie-product{border-color:#D3D0C7} .fenie-product span{color:#161B26}

/* ---------- Retrato ---------- */
.shot{position:relative;border:1px solid var(--ink);padding:11px;background:var(--paper-2)}
.shot::before,.shot::after{content:"";position:absolute;width:13px;height:13px;border:1px solid var(--accent)}
.shot::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.shot::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.shot__i{position:relative;overflow:hidden;aspect-ratio:3/2;background:#16202F}
.shot__i img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.06) brightness(.92);
  clip-path:inset(0 100% 0 0);transform:scale(1.04);
  transition:clip-path 1.1s var(--e) .1s,filter .6s,transform 1.4s var(--e)}
.in .shot__i img,.shot.in .shot__i img{clip-path:inset(0 0 0 0);transform:scale(1)}
.shot:hover .shot__i img{filter:none}
.shot__i::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,12,20,0) 55%,rgba(8,12,20,.6))}
.shot__c{display:flex;justify-content:space-between;gap:14px;padding:11px 2px 2px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--tx3)}

/* ---------- Apariciones ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--e),transform .8s var(--e);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}

/* ---------- Barra de contacto en móvil ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:115;display:none;grid-template-columns:1fr 1fr 1fr;
  background:rgba(8,12,20,.96);backdrop-filter:blur(10px);border-top:1px solid var(--ink)}
.bar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px;color:var(--tx);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase}
.bar a+a{border-left:1px solid var(--ink)}
.bar svg{width:19px;height:19px} .bar .wa{color:var(--clima)}

/* ---------- Pantallas ---------- */
@media (max-width:1500px){ .rail{display:none} }
@media (max-width:980px){ .stage{width:min(520px,52vw)} .iso{width:52%} .iso__stack{width:46vw} }
@media (max-width:900px){
  .site-header{height:64px}
  .figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fig:nth-child(2){border-right:0} .fig:nth-child(-n+2){border-bottom:1px solid var(--ink)}
}
@media (max-width:760px){
  body{padding-bottom:58px}
  .sheet{padding:0} .sheet-inner{border:0}
  .track{height:auto}
  .scene{position:static;height:auto;padding:30px 0 36px;display:flex;flex-direction:column}
  .scene__ui{display:contents}
  .iso{order:2;position:static;width:auto;padding:24px var(--gut) 0;perspective:none;display:block}
  .iso__stack{width:100%;transform:none!important}
  .iso__stack::after{display:none}
  .iso__pl{position:absolute;inset:0;transform:none!important}
  .iso__pl:first-child{position:relative}
  .iso__pl::before{display:none}
  .stage{order:1;position:static;transform:none;width:auto;perspective:none;padding:0 var(--gut)}
  .hero__in{transform:none!important;opacity:1!important}
  .legend{order:3;position:static;align-items:flex-start;flex-direction:row;flex-wrap:wrap;gap:8px 16px;
    padding:22px var(--gut) 0}
  .lay{color:var(--tx)} .lay i{opacity:1}
  .hsteps{order:4;position:static;width:auto;opacity:1!important;transform:none!important;padding:26px var(--gut) 0}
  .cue{display:none}
  .figs{grid-template-columns:minmax(0,1fr)}
  .fig{border-right:0;border-bottom:1px solid var(--ink)}
  .bar{display:grid}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .shot__i img{clip-path:none;transform:none}
  .label::before{transform:scaleX(1)}
  .tick__in{animation:none}
}

/* =================================================================
   AJUSTES — ancho en monitores grandes y página de presupuesto
   ================================================================= */

/* ---------- 1. Aprovechar la pantalla completa ---------- */
.sheet{max-width:1680px}
@media (min-width:1900px){ .sheet{max-width:1820px} :root{--gut:64px} }
@media (min-width:1500px){ .page-head{padding:96px var(--gut) 72px} }
.page-head__row .h1{max-width:960px;font-size:clamp(46px,5.4vw,86px)}
.services-layout{grid-template-columns:320px minmax(0,1fr)}
.legal{max-width:1040px}

/* ---------- 2. El plano ya no se corta al desplegarse ---------- */
@media (min-width:761px){
  .iso{width:60%;perspective:2600px;perspective-origin:50% 48%}
  .iso__stack{width:min(90%,68vh)}
  .stage{width:min(620px,38vw)}
  .hsteps{width:min(540px,38vw)}
  .hero__in .h1{font-size:clamp(40px,4.4vw,76px)}
}
@media (min-width:761px) and (max-width:1400px){
  .iso__stack{width:min(92%,60vh)}
}
@media (min-width:761px) and (max-width:980px){
  .iso{width:54%} .stage{width:min(480px,42vw)} .iso__stack{width:min(96%,52vh)}
}

/* ---------- 3. Página de presupuesto: misma estética que el resto ---------- */
.form-layout{grid-template-columns:minmax(0,1fr) minmax(380px,480px)}
.form-col{position:relative;padding:clamp(44px,4vw,80px) var(--gut)}
.form-col::before{content:"";position:absolute;left:0;top:0;height:2px;width:min(360px,46%);
  background:linear-gradient(90deg,var(--accent),var(--clima),transparent)}
.form{gap:34px}

/* Cabeceras de bloque */
.form .col-head,.form-aside .col-head{display:flex;align-items:center;gap:12px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3)}
.form .col-head::before,.form-aside .col-head::before{content:"";width:26px;height:1px;background:var(--accent);flex:none}

/* Etiquetas y campos */
.form .field-label,.form legend.field-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx3);font-weight:400;transition:color .3s}
.form .field:focus-within>.field-label{color:var(--accent)}
.form .input{min-height:56px;background:rgba(17,26,42,.7);border-color:var(--ink);font-size:16px;
  transition:border-color .3s var(--e),box-shadow .3s var(--e),background .3s}
.form .input:hover{border-color:rgba(146,167,201,.4)}
.form .input:focus{outline:none;border-color:var(--accent);background:#0C1320;
  box-shadow:0 0 0 3px rgba(61,139,255,.16)}
.form textarea.input{min-height:190px}

/* Botones de tipo de proyecto */
.choice span{min-height:44px;padding:0 15px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;background:rgba(17,26,42,.5);color:var(--tx2);border-color:var(--ink);
  transition:all .3s var(--e)}
.choice span:hover{border-color:var(--accent);color:var(--tx)}
.choice input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--on-accent);
  box-shadow:0 0 0 3px rgba(61,139,255,.14)}

/* Zona de archivos */
.dropzone{min-height:104px;background:rgba(17,26,42,.55);transition:border-color .3s,background .3s}
.dropzone:hover{border-style:solid;border-color:var(--accent);background:rgba(61,139,255,.07)}

/* Aviso de protección de datos y botón */
.data-info{background:rgba(17,26,42,.62);border-color:var(--ink)}
.form .btn[type="submit"]{min-height:58px;padding:0 30px;font-size:16px}

/* Columna lateral en módulos */
.form-aside{padding:clamp(44px,4vw,80px) clamp(28px,2.6vw,48px);gap:34px;
  background:linear-gradient(180deg,rgba(17,26,42,.5),rgba(8,12,20,0) 55%)}
.form-aside .list-block{padding:26px;border:1px solid var(--ink);background:var(--paper-2)}
.form-aside .list-block .h3{font-size:21px}
.form-aside .map-box{height:260px}

/* ---------- 4. Página de gracias ---------- */
.thanks{max-width:1000px;padding:clamp(88px,11vh,150px) var(--gut)}
.thanks .h1{font-size:clamp(40px,5vw,78px)}

@media (max-width:900px){
  .form-layout{grid-template-columns:minmax(0,1fr)}
  .form-col{border-right:0}
  .form-aside{border-top:1px solid var(--ink);background:none}
  .services-layout{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 5. Texto siempre legible sobre el plano (solo en escritorio) ---------- */
@media (min-width:761px){
  .hsteps{z-index:4}
  .hsteps::before{content:"";position:absolute;inset:-26px -40px -26px -60px;z-index:-1;pointer-events:none;
    background:radial-gradient(120% 130% at 12% 70%,rgba(8,12,20,.94),rgba(8,12,20,.72) 52%,rgba(8,12,20,0) 86%)}
  .legend{z-index:4}
  .legend::before{content:"";position:absolute;inset:-18px -34px -18px -48px;z-index:-1;pointer-events:none;
    background:radial-gradient(120% 140% at 88% 72%,rgba(8,12,20,.92),rgba(8,12,20,.66) 54%,rgba(8,12,20,0) 88%)}
  .stage{z-index:5}
  .cue{z-index:4}
}