/* =========================================================================
   INTERLAGOS SL — «COTA CERO»
   Sistema visual del sitio. Todo lo de aquí es reutilizable en las
   páginas interiores: no hay nada atado a la home.
   ========================================================================= */

/* --- 1. TOKENS ---------------------------------------------------------- */
:root{
  --bg:#EDE9E2;
  --surface:#F7F5F1;
  --ink:#1C1C1A;
  --primary:#1F3A34;
  --accent:#D4562A;
  --grey:#8C8A83;
  --line:#C9C3B8;
  --black:#0E1512;

  --hair:var(--line);
  --on:var(--ink);

  --pad:clamp(24px,5vw,64px);
  --gutter:24px;
  --maxw:1440px;
  --hdr:96px;

  --f-display:"Archivo",system-ui,sans-serif;
  --f-body:"Source Serif 4",Georgia,serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;

  --sec-y:clamp(64px,9vw,132px);
}

/* --- 2. RESET ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,ul,ol,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
input,textarea,select{font:inherit;color:inherit}

html{scroll-behavior:auto}
body{
  font-family:var(--f-body);
  font-size:1.125rem;
  line-height:1.65;
  color:var(--ink);
  background-color:var(--bg);
  /* malla de replanteo — 24px */
  background-image:radial-gradient(circle at 1px 1px,rgba(28,28,26,.13) 1px,transparent 0);
  background-size:24px 24px;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

/* --- 3. UTILIDADES BASE ------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--sec-y);position:relative}
.section-flush{position:relative}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--primary);color:var(--bg);padding:12px 18px;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.skip:focus{left:12px;top:12px}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* retícula visible de 12 columnas (se inyecta con JS) */
.section--guides{position:relative}
.guides{
  position:absolute;inset:0;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--pad);display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);
  pointer-events:none;z-index:0;
}
.guides span{border-left:1px solid rgba(201,195,184,.55)}
.guides span:last-child{border-right:1px solid rgba(201,195,184,.55)}
.section--guides>.wrap{position:relative;z-index:1}

/* bloques oscuros */
.on-dark{background:var(--primary);color:var(--bg);--hair:rgba(237,233,226,.28);--on:var(--bg)}
.on-black{background:var(--black);color:var(--bg);--hair:rgba(237,233,226,.22);--on:var(--bg)}

/* --- 4. TIPOGRAFÍA ------------------------------------------------------ */
.eyebrow,.figcap,.note,.mono{font-family:var(--f-mono);font-weight:500;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.5}
.eyebrow{color:var(--grey)}
.on-dark .eyebrow,.on-black .eyebrow{color:rgba(237,233,226,.62)}

.display,.h1{font-family:var(--f-display);font-weight:700;letter-spacing:-.035em;line-height:.94;font-size:clamp(3rem,7vw,6.5rem)}
.h2{font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;line-height:1.02;font-size:clamp(2rem,4vw,3.5rem)}
.h3{font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;font-size:1.5rem;line-height:1.15}
h1 em,h2 em,h3 em,.ital{font-family:var(--f-body);font-style:italic;font-weight:400;letter-spacing:-.01em}

.lead{font-size:1.25rem;line-height:1.55;max-width:33em}
p{max-width:62ch}
.note{font-size:.6875rem;letter-spacing:.1em;color:var(--grey);line-height:1.7;max-width:70ch}
.on-dark .note{color:rgba(237,233,226,.7)}

.sec-head{margin-bottom:clamp(40px,6vw,80px)}
.sec-head .eyebrow{margin-bottom:22px}
.sec-head__lead{font-size:1.0625rem;margin-top:24px;max-width:46ch}
.sec-head--split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gutter);align-items:end}
.sec-head--split .sec-head__lead{margin-top:0}

/* --- 5. LÍNEA DE COTA (motivo del sistema) ------------------------------ */
.cota{display:block;width:100%}
.cota__label{
  display:block;font-family:var(--f-mono);font-weight:500;font-size:.6875rem;
  letter-spacing:.14em;text-transform:uppercase;text-align:center;margin-bottom:8px;color:inherit;
}
.cota__line{display:block;position:relative;height:1px;background:currentColor;opacity:.5}
.cota__line::before,.cota__line::after{
  content:"";position:absolute;top:-6px;width:1px;height:13px;background:currentColor;transform:rotate(45deg);
}
.cota__line::before{left:0}
.cota__line::after{right:0}
.cota--start .cota__label{text-align:left}
.cota--end .cota__label{text-align:right}
.cota--accent{color:var(--accent)}
.cota--accent .cota__line{opacity:1}
.cota--fixed{width:var(--w,120px)}

/* variante vertical */
.cota--v{width:1px;height:100%;display:flex;align-items:center;justify-content:center;position:relative}
.cota--v .cota__label{position:absolute;white-space:nowrap;writing-mode:vertical-rl;transform:rotate(180deg);margin:0;left:-18px;color:var(--grey)}
.cota--v .cota__line{width:1px;height:100%}
.cota--v .cota__line::before,.cota--v .cota__line::after{top:auto;left:-6px;width:13px;height:1px}
.cota--v .cota__line::before{top:0}
.cota--v .cota__line::after{bottom:0;right:auto}

/* --- 6. BOTONES Y ENLACES ----------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-mono);font-weight:500;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  padding:17px 24px;border:1px solid transparent;border-radius:2px;
  transition:box-shadow .18s ease,transform .18s ease,background-color .18s ease,color .18s ease;
}
.btn--primary{background:var(--primary);color:var(--bg);border-color:var(--primary)}
.btn--primary:hover,.btn--primary:focus-visible{box-shadow:2px 2px 0 var(--accent);transform:translate(-2px,-2px)}
.btn--ghost{border-color:currentColor;color:inherit}
.btn--ghost:hover,.btn--ghost:focus-visible{box-shadow:2px 2px 0 currentColor;transform:translate(-2px,-2px)}
.btn--light{background:var(--bg);color:var(--black);border-color:var(--bg)}
.btn--light:hover,.btn--light:focus-visible{box-shadow:2px 2px 0 var(--accent);transform:translate(-2px,-2px)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

.link-arrow{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:.75rem;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid currentColor;padding-bottom:6px;
  transition:gap .2s ease,color .2s ease;
}
.link-arrow:hover{gap:18px;color:var(--accent)}
.link-arrow--light:hover{color:var(--bg);opacity:.75}

/* --- 7. HEADER ---------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(237,233,226,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s ease;
}
.site-header.is-stuck{box-shadow:0 1px 0 rgba(28,28,26,.08)}
.site-header__inner{
  max-width:var(--maxw);margin-inline:auto;padding:16px var(--pad);
  display:flex;align-items:center;gap:32px;min-height:var(--hdr);
}
.brand{display:block;margin-right:auto}
.brand__name{display:block;font-family:var(--f-display);font-weight:700;font-size:1.0625rem;letter-spacing:-.01em;line-height:1}
.brand__sub{display:block;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.16em;color:var(--grey);margin-top:5px}

.nav__list{display:flex;gap:28px}
.nav__link{
  position:relative;display:inline-block;padding:6px 0 10px;
  font-family:var(--f-mono);font-weight:500;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;
  transition:color .18s ease;
}
.nav__link:hover{color:var(--primary)}
.nav__link[aria-current="page"]{color:var(--primary)}
.nav__link[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor}
.nav__link[aria-current="page"]::before{content:"";position:absolute;left:0;right:0;bottom:-5px;height:11px;border-left:1px solid currentColor;border-right:1px solid currentColor;transform:skewX(-45deg)}

.tel-link{display:block;text-align:right;border-left:1px solid var(--line);padding-left:28px}
.tel-link__label{display:block;font-family:var(--f-mono);font-size:.625rem;letter-spacing:.16em;color:var(--grey)}
.tel-link__num{display:block;font-family:var(--f-display);font-weight:700;font-size:1.125rem;letter-spacing:-.01em;margin-top:3px}
.tel-link:hover .tel-link__num{color:var(--primary)}

.burger{display:none;align-items:center;gap:10px;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em}
.burger__box{display:block;width:22px}
.burger__box i{display:block;height:1px;background:var(--ink);margin:5px 0;transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] .burger__box i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__box i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger__box i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* menú móvil */
.mobile-nav{position:fixed;inset:var(--hdr) 0 0;z-index:55;background:var(--bg);padding:32px var(--pad) 96px;display:flex;flex-direction:column;justify-content:space-between;overflow:auto}
.mobile-nav[hidden]{display:none}
.mobile-nav__list li+li{border-top:1px solid var(--line)}
.mobile-nav__list a{display:block;padding:20px 0;font-family:var(--f-display);font-weight:700;font-size:1.75rem;letter-spacing:-.03em}
.mobile-nav__list a[aria-current="page"]{color:var(--primary)}
.mobile-nav__foot{border-top:1px solid var(--line);padding-top:24px}
.mobile-nav__tel{display:block;font-family:var(--f-display);font-weight:700;font-size:2rem;letter-spacing:-.03em;margin-top:8px}

/* --- 8. HERO ------------------------------------------------------------ */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:calc(100svh - var(--hdr));border-bottom:1px solid var(--line)}
.hero__panel{padding:clamp(40px,6vw,80px) clamp(32px,4vw,64px) clamp(40px,6vw,80px) var(--pad);display:flex;flex-direction:column;justify-content:center;gap:28px;background:var(--bg)}
.hero__panel .lead{max-width:38ch}
.hero__cota{max-width:320px;margin-top:4px}
.hero__media{position:relative;overflow:hidden;background:var(--black)}
.hero__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.03)}
.figcap{display:block;margin-top:12px;color:var(--grey)}
.figcap--over{
  position:absolute;left:0;right:0;bottom:0;margin:0;padding:56px 24px 18px;
  color:rgba(237,233,226,.85);
  background:linear-gradient(to top,rgba(14,21,18,.72),rgba(14,21,18,0));
}

/* --- 9. TIRA DE TARIFAS ------------------------------------------------- */
.tarifas{padding:clamp(40px,5vw,64px) 0}
.tarifas__head{padding:0 var(--pad) 28px;max-width:var(--maxw);margin-inline:auto}
.tarifas__track{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
}
.tarifa{padding:26px 22px;border-left:1px solid var(--hair)}
.tarifa:first-child{padding-left:0;border-left:0}
.tarifa:last-child{padding-right:0}
.tarifa__name{font-family:var(--f-display);font-weight:600;font-size:1.1875rem;line-height:1.2;letter-spacing:-.02em;min-height:2.4em}
.tarifa .cota{margin:20px 0 12px}
.tarifa__price{font-family:var(--f-mono);font-weight:400;font-size:1.375rem;letter-spacing:.01em}
.tarifas__foot{max-width:var(--maxw);margin-inline:auto;padding:28px var(--pad) 0;display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;justify-content:space-between;border-top:1px solid var(--hair);margin-top:8px}
.strip-index{display:none;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.16em;color:rgba(237,233,226,.7)}

/* --- 10. MANIFIESTO ----------------------------------------------------- */
.manifiesto__inner{display:grid;grid-template-columns:1px minmax(0,1fr) 1px;gap:clamp(28px,5vw,64px);justify-content:center;align-items:stretch}
.manifiesto__body{max-width:62ch;margin-inline:auto;text-align:center}
.manifiesto__body .eyebrow{margin-bottom:28px}
.manifiesto__text{font-size:clamp(1.25rem,2.1vw,1.5rem);line-height:1.5;max-width:none}
.manifiesto__claim{font-family:var(--f-display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.03em;margin-top:36px;max-width:none}
.manifiesto__cota{min-height:180px}

/* --- 11. FICHAS / CARDS ------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gutter) var(--gutter)}
.card{grid-column:span 2;border-top:1px solid var(--ink);padding-top:20px}
.card--wide{grid-column:span 3}
.card__num{display:block;font-family:var(--f-mono);font-weight:500;font-size:.75rem;letter-spacing:.16em;color:var(--grey)}
.card--accent .card__num{color:var(--accent)}
.card__title{font-family:var(--f-display);font-weight:600;font-size:1.5rem;line-height:1.1;letter-spacing:-.02em;margin:14px 0 12px}
.card p{font-size:1rem;line-height:1.6}

/* --- 12. CIFRAS --------------------------------------------------------- */
.stats .eyebrow{margin-bottom:44px}
.stats__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)}
.stat{padding-right:16px}
.stat__num{font-family:var(--f-display);font-weight:700;font-size:clamp(3rem,5.4vw,4.75rem);line-height:.9;letter-spacing:-.04em;margin-bottom:20px}
.stat__num--tel{font-size:clamp(1.5rem,2.4vw,2.125rem);letter-spacing:-.03em}
.stat__num--tel a:hover{color:var(--primary)}
.stat__foot{font-size:.9375rem;line-height:1.55;color:#3a3a37;margin-top:16px;max-width:30ch}

/* --- 13. REJILLA DE OBRA ------------------------------------------------ */
.obra__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter) var(--gutter);align-items:start}
.obra__item{margin:0}
.obra__item img{width:100%;height:100%;object-fit:cover}
.obra__item--a{grid-column:1/8}
.obra__item--b{grid-column:9/13;transform:translateY(80px)}
.obra__item--c{grid-column:1/4;margin-top:56px}
.obra__note{grid-column:5/8;margin-top:56px;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.obra__note p{font-size:1rem}

/* --- 14. TIMELINE DE FASES ---------------------------------------------- */
.phases{margin-top:clamp(32px,5vw,56px);border-top:1px solid var(--hair)}
.phase{display:grid;grid-template-columns:80px minmax(0,1fr);gap:var(--gutter);padding:28px 0;border-bottom:1px solid var(--hair)}
.phase__num{font-family:var(--f-mono);font-weight:500;font-size:.875rem;letter-spacing:.16em;padding-top:6px;color:rgba(237,233,226,.6)}
.phase__title{font-family:var(--f-display);font-weight:600;font-size:1.375rem;letter-spacing:-.02em;line-height:1.1}
.phase__bar{width:var(--w,100%);max-width:100%;margin:22px 0 16px;min-width:150px}
.phase__bar--accent{color:var(--accent)}
.phase__bar--accent .cota__line{opacity:1}
.phase__body p{font-size:1rem;line-height:1.6;color:rgba(237,233,226,.82)}
.metodo .link-arrow{margin-top:40px}

/* --- 15. REFERENCIAS / CITAS -------------------------------------------- */
.referencias__inner{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--gutter);margin-top:44px}
.referencias__text{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.quote{font-size:1.375rem;line-height:1.45;font-style:italic;max-width:34ch}
.quote__by{display:block;margin-top:18px;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--grey)}

/* --- 16. CIERRE + FORMULARIO -------------------------------------------- */
.cierre{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);border-top:1px solid var(--line);background:var(--surface)}
.cierre__media{margin:0;position:relative;min-height:520px;background:var(--black)}
.cierre__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.7) contrast(1.05)}
.cierre__panel{padding:clamp(48px,6vw,96px) var(--pad) clamp(48px,6vw,96px) clamp(32px,4vw,64px);display:flex;flex-direction:column;gap:24px}
.cierre__panel .eyebrow{margin-bottom:6px}
.tel-big{font-family:var(--f-display);font-weight:700;font-size:clamp(2.25rem,4.4vw,3.25rem);letter-spacing:-.04em;line-height:1;display:inline-block}
.tel-big:hover{color:var(--primary)}
.cierre .cota--accent{max-width:340px}
.cierre__spec{margin-top:8px}

.form{margin-top:16px;border-top:1px solid var(--line);padding-top:28px;max-width:640px}
.form__title{font-family:var(--f-mono);font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:22px}
.field{margin-bottom:24px}
.field__label{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:8px}
.field__flag{color:var(--primary);border:1px solid var(--primary);padding:2px 6px;font-size:.5625rem;letter-spacing:.12em}
.field__opt{color:var(--grey);opacity:.8}
.field__input{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;
  padding:10px 0;font-family:var(--f-body);font-size:1.0625rem;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.field__input::placeholder{color:var(--grey);opacity:.85}
.field__input:focus{outline:0;border-bottom-color:var(--primary);box-shadow:0 1px 0 0 var(--primary)}
.field__input--area{resize:vertical;min-height:96px;line-height:1.55}
.field__hint{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.06em;color:var(--grey);margin-top:8px;text-transform:none}
.field__error{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.06em;color:var(--accent);margin-top:8px;min-height:0}
.field__error:empty{display:none}
.field.is-invalid .field__input{border-bottom-color:var(--accent);border-bottom-width:2px}
.form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:8px}
.form__actions .note{max-width:32ch;margin:0}
.form-success{background:var(--primary);color:var(--bg);padding:32px;border-radius:2px;margin-top:16px;max-width:640px}
.form-success p{font-size:1.0625rem;margin-top:18px;color:rgba(237,233,226,.92)}
.form-success .cota{max-width:260px;color:var(--bg)}

/* pares clave/valor (ficha técnica) — reutilizable en interiores */
.spec{border-top:1px solid var(--hair)}
.spec__row{display:grid;grid-template-columns:minmax(120px,32%) minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--hair)}
.spec__row dt{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.spec__row dd{font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.02em;margin:0}
.on-dark .spec__row dt{color:rgba(237,233,226,.6)}

/* --- 17. COMPONENTES PARA PÁGINAS INTERIORES ---------------------------- */
/* cabecera de página */
.page-head{padding:clamp(56px,7vw,104px) 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.page-head .eyebrow{margin-bottom:24px}
.page-head__lead{font-size:1.1875rem;max-width:52ch;margin-top:28px}
.page-head .cota{margin-top:44px}

/* tabla de tarifas */
.tbl{width:100%;border-collapse:collapse}
.tbl caption{text-align:left;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);padding-bottom:16px}
.tbl th{
  text-align:left;font-family:var(--f-mono);font-weight:500;font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);border-bottom:1px solid var(--ink);padding:0 20px 12px 0;
}
.tbl td{border-bottom:1px solid var(--line);padding:20px 20px 20px 0;font-size:1rem;vertical-align:top}
.tbl td.num{font-family:var(--f-mono);font-size:.9375rem}
.tbl tbody tr{transition:background-color .15s ease}
.tbl tbody tr:hover{background:var(--surface)}
.tbl tbody tr:hover td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
.note-box{border:1px solid var(--line);padding:22px;margin-top:28px;border-radius:2px}
.note-box .note{color:var(--ink);opacity:.8}

/* acordeón */
.accordion{border-top:1px solid var(--hair)}
.accordion__item{border-bottom:1px solid var(--hair)}
.accordion__btn{display:flex;width:100%;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;text-align:left;font-family:var(--f-display);font-weight:600;font-size:1.125rem;letter-spacing:-.01em}
.accordion__icon{position:relative;width:14px;height:14px;flex:none}
.accordion__icon::before,.accordion__icon::after{content:"";position:absolute;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.accordion__icon::before{left:0;right:0;top:6px;height:1px}
.accordion__icon::after{top:0;bottom:0;left:6px;width:1px}
.accordion__btn[aria-expanded="true"] .accordion__icon::after{transform:scaleY(0)}
.accordion__panel{overflow:hidden;height:0;transition:height .2s ease}
.accordion__panel>div{padding-bottom:24px}
.accordion__panel p{font-size:1rem}

/* comparador antes/después */
.compare{position:relative;overflow:hidden;border-radius:2px;--pos:50%;touch-action:pan-y;user-select:none}
.compare img{width:100%;display:block}
.compare__after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.compare__after img{width:100%;height:100%;object-fit:cover}
.compare__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:1px;background:var(--bg);cursor:ew-resize;transform:translateX(-.5px)}
.compare__handle::before,.compare__handle::after{content:"";position:absolute;left:50%;width:13px;height:1px;background:var(--bg);transform-origin:left center}
.compare__handle::before{top:14px;transform:translateX(-50%) rotate(45deg)}
.compare__handle::after{bottom:14px;transform:translateX(-50%) rotate(-45deg)}
.compare__tag{position:absolute;bottom:16px;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bg);background:rgba(14,21,18,.62);padding:6px 10px}
.compare__tag--l{left:16px}
.compare__tag--r{right:16px}

/* --- 18. FOOTER --------------------------------------------------------- */
.site-footer{background:var(--black);color:var(--bg);padding:clamp(56px,7vw,96px) 0 40px;--hair:rgba(237,233,226,.28)}
.footer__top{display:flex;flex-wrap:wrap;gap:32px;align-items:end;justify-content:space-between;padding-bottom:clamp(40px,5vw,64px)}
.footer__claim{font-family:var(--f-display);font-weight:700;font-size:clamp(1.75rem,3.6vw,3rem);letter-spacing:-.035em;line-height:1;max-width:none}
.cartouche{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--hair);border-radius:2px}
.cartouche__field{padding:18px 20px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);min-height:92px}
.cartouche__field .k{display:block;font-family:var(--f-mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(237,233,226,.55)}
.cartouche__field .v{display:block;font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.02em;margin-top:10px;line-height:1.5}
.cartouche__field .v a:hover{color:var(--accent)}
.cartouche__field--wide{grid-column:span 2}
.cartouche__field--sign{grid-column:span 4;border-right:0;border-bottom:0;display:flex;align-items:flex-end;gap:24px;min-height:104px}
.sign-line{flex:1;height:1px;background:var(--hair);margin-bottom:8px}
.footer__bottom{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;align-items:center;margin-top:36px}
.footer-nav ul{display:flex;flex-wrap:wrap;gap:24px}
.footer-nav a{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(237,233,226,.75)}
.footer-nav a:hover{color:var(--bg)}
.footer__legal{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.1em;color:rgba(237,233,226,.55);text-transform:uppercase;max-width:none}

/* --- 19. BARRA FIJA MÓVIL ----------------------------------------------- */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;height:64px;background:var(--primary);border-top:1px solid rgba(237,233,226,.25)}
.callbar__btn{display:flex;align-items:center;justify-content:center;text-align:center;color:var(--bg);font-family:var(--f-mono);font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:0 10px}
.callbar__btn--alt{background:var(--accent);color:#fff}

/* --- 20. RESPONSIVE ----------------------------------------------------- */
@media (max-width:1180px){
  .nav__list{gap:20px}
  .tel-link{padding-left:20px}
  .tarifa__name{font-size:1.0625rem}
}
@media (max-width:1024px){
  :root{--hdr:84px}
  .nav,.tel-link{display:none}
  .burger{display:inline-flex}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero__panel{padding:clamp(36px,7vw,64px) var(--pad)}
  .hero__media{min-height:56vh}
  .sec-head--split{grid-template-columns:1fr;gap:28px;align-items:start}
  .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .card,.card--wide{grid-column:span 2}
  .stats__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px var(--gutter)}
  .obra__item--a{grid-column:1/9}
  .obra__item--b{grid-column:9/13;transform:none}
  .obra__item--c{grid-column:1/6;margin-top:32px}
  .obra__note{grid-column:6/13;margin-top:32px}
  .referencias__inner{grid-template-columns:1fr;gap:32px}
  .cierre{grid-template-columns:1fr}
  .cierre__media{min-height:320px}
  .cierre__panel{padding:clamp(40px,6vw,64px) var(--pad)}
  .cartouche{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cartouche__field--wide{grid-column:span 2}
  .cartouche__field--sign{grid-column:span 2}
  .guides{display:none}
  .manifiesto__cota{display:none}
  .manifiesto__inner{grid-template-columns:1fr}
}
@media (max-width:767px){
  body{padding-bottom:64px}
  .callbar{display:grid;grid-template-columns:1fr 1fr}
  .display{font-size:clamp(2.5rem,11vw,3.4rem)}
  .lead{font-size:1.125rem}
  .tarifas__track{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .tarifas__track::-webkit-scrollbar{display:none}
  .tarifa{flex:0 0 74%;scroll-snap-align:start;padding:22px;border-left:1px solid var(--hair)}
  .tarifa:first-child{padding-left:0}
  .tarifa__name{min-height:0}
  .strip-index{display:block}
  .tarifas__foot{flex-direction:column;gap:18px}
  .cards{grid-template-columns:1fr}
  .card,.card--wide{grid-column:span 1}
  .stats__grid{grid-template-columns:1fr;gap:40px}
  .obra__grid{grid-template-columns:1fr}
  .obra__item--a,.obra__item--b,.obra__item--c,.obra__note{grid-column:1;margin-top:0}
  .obra__item--c{max-width:70%}
  .phase{grid-template-columns:1fr;gap:8px}
  .phase__num{padding-top:0}
  .phase__bar{width:100% !important;min-width:0}
  .spec__row{grid-template-columns:1fr;gap:4px}
  .cartouche{grid-template-columns:1fr}
  .cartouche__field,.cartouche__field--wide,.cartouche__field--sign{grid-column:span 1;border-right:0}
  .footer__bottom{flex-direction:column;align-items:flex-start}
  .compare__handle::before,.compare__handle::after{display:none}
}

/* --- 21. MOVIMIENTO REDUCIDO -------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .btn:hover,.btn:focus-visible{transform:none}
  .obra__item--b{transform:none}
}

/* =========================================================================
   SERVICIOS Y TARIFAS — documento 02
   ========================================================================= */

body[data-page="servicios"] .page-head__lead{max-width:56ch}
body[data-page="servicios"] .page-head .cota{max-width:520px}

/* --- tabla maestra ------------------------------------------------------ */
body[data-page="servicios"] .tbl-scroll{width:100%}
body[data-page="servicios"] .tarifa-tbl{table-layout:fixed}
body[data-page="servicios"] .tarifa-tbl th:nth-child(1),
body[data-page="servicios"] .tarifa-tbl td:nth-child(1){width:26%}
body[data-page="servicios"] .tarifa-tbl th:nth-child(2),
body[data-page="servicios"] .tarifa-tbl td:nth-child(2){width:15%}
body[data-page="servicios"] .tarifa-tbl th:nth-child(3),
body[data-page="servicios"] .tarifa-tbl td:nth-child(3){width:17%}

body[data-page="servicios"] .tarifa-tbl tbody th{
  font-family:var(--f-display);font-weight:600;font-size:1.125rem;line-height:1.2;
  letter-spacing:-.02em;text-transform:none;color:var(--ink);
  border-bottom:1px solid var(--line);padding:22px 20px 22px 0;vertical-align:top;
}
body[data-page="servicios"] .tarifa-tbl td{padding:22px 20px 22px 0;color:#33332F}
body[data-page="servicios"] .tarifa-tbl td.num{font-size:1rem;color:var(--ink);white-space:nowrap}
body[data-page="servicios"] .tarifa-tbl tbody tr:hover th{background:var(--surface)}
body[data-page="servicios"] .tarifa-tbl tbody tr:hover th:first-child{box-shadow:inset 2px 0 0 var(--accent)}
body[data-page="servicios"] .tarifa-tbl tbody tr:hover td:first-child{box-shadow:none}

body[data-page="servicios"] .tarifa-tbl__jump{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-family:var(--f-mono);font-weight:500;font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);border-bottom:1px solid var(--line);padding-bottom:3px;
  transition:color .18s ease,border-color .18s ease;
}
body[data-page="servicios"] .tarifa-tbl__jump:hover{color:var(--primary);border-color:var(--primary)}

body[data-page="servicios"] .note-box{background:var(--surface)}
body[data-page="servicios"] .note-box .note+.note{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
body[data-page="servicios"] .note-box strong{font-weight:500;color:var(--ink);letter-spacing:.12em}

/* --- fichas de servicio ------------------------------------------------- */
body[data-page="servicios"] .svc-list{padding-block:clamp(48px,7vw,96px) 0}
body[data-page="servicios"] .svc-sep{margin-block:clamp(24px,4vw,40px) 0}
body[data-page="servicios"] .svc-sep .cota__label{color:var(--grey)}

body[data-page="servicios"] .svc{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);
  align-items:start;padding-block:clamp(40px,5.5vw,80px) clamp(48px,7vw,104px);
  scroll-margin-top:calc(var(--hdr) + 24px);
}
body[data-page="servicios"] .svc__media{grid-column:1/7;margin:0}
body[data-page="servicios"] .svc__body{grid-column:8/13;border-top:1px solid var(--ink);padding-top:22px}
body[data-page="servicios"] .svc--rev .svc__media{grid-column:7/13}
body[data-page="servicios"] .svc--rev .svc__body{grid-column:1/6}
body[data-page="servicios"] .svc__media img{width:100%;height:auto;filter:saturate(.88) contrast(1.03)}

body[data-page="servicios"] .svc__title{margin:18px 0 20px;font-size:clamp(1.75rem,3vw,2.5rem)}
body[data-page="servicios"] .svc__text{font-size:1.0625rem;line-height:1.6}
body[data-page="servicios"] .svc__ptitle{
  font-family:var(--f-mono);font-weight:500;font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);margin-top:34px;
}
body[data-page="servicios"] .svc__partidas{
  margin-top:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gutter);
}
body[data-page="servicios"] .svc__partidas li{
  font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.03em;line-height:1.45;
  padding:10px 0;border-top:1px solid var(--line);
}
body[data-page="servicios"] .svc .spec{margin-top:32px}
body[data-page="servicios"] .svc .link-arrow{margin-top:28px}

/* --- qué mueve el presupuesto ------------------------------------------ */
body[data-page="servicios"] .subida__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,48px) clamp(32px,5vw,72px);
}
body[data-page="servicios"] .subida__item{border-top:1px solid var(--hair);padding-top:18px}
body[data-page="servicios"] .subida__num{
  display:block;font-family:var(--f-mono);font-weight:500;font-size:.75rem;
  letter-spacing:.16em;color:rgba(237,233,226,.6);margin-bottom:12px;
}
body[data-page="servicios"] .subida__item h3{margin-bottom:12px}
body[data-page="servicios"] .subida__item p{font-size:1rem;line-height:1.6;color:rgba(237,233,226,.84)}
body[data-page="servicios"] .subida__close{
  font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;line-height:1.15;
  font-size:clamp(1.25rem,2.2vw,1.75rem);max-width:24ch;margin-top:clamp(40px,5vw,64px);
  border-top:1px solid var(--hair);padding-top:26px;
}

/* --- materiales --------------------------------------------------------- */
body[data-page="servicios"] .mat__inner{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-items:start;
}
body[data-page="servicios"] .mat__media{grid-column:1/5;margin:0;position:sticky;top:calc(var(--hdr) + 32px)}
body[data-page="servicios"] .mat__media img{width:100%;height:auto}
body[data-page="servicios"] .mat__body{grid-column:6/13}
body[data-page="servicios"] .mat__cols{margin-top:32px;display:grid;gap:20px}
body[data-page="servicios"] .mat__cols p{font-size:1.0625rem}
body[data-page="servicios"] .mat__cota{max-width:420px;margin-top:40px}
body[data-page="servicios"] .mat__note{margin-top:16px}

/* --- cierre ------------------------------------------------------------- */
body[data-page="servicios"] .cierre__media img{filter:saturate(.72) contrast(1.04)}
body[data-page="servicios"] .cierre .btn-row{margin-top:8px}
body[data-page="servicios"] .cierre__spec{margin-top:16px;max-width:560px}

/* --- responsive --------------------------------------------------------- */
@media (max-width:1024px){
  body[data-page="servicios"] .svc{grid-template-columns:1fr;gap:28px}
  body[data-page="servicios"] .svc__media,
  body[data-page="servicios"] .svc--rev .svc__media{grid-column:1;max-width:560px}
  body[data-page="servicios"] .svc__body,
  body[data-page="servicios"] .svc--rev .svc__body{grid-column:1}
  body[data-page="servicios"] .mat__inner{grid-template-columns:1fr}
  body[data-page="servicios"] .mat__media,
  body[data-page="servicios"] .mat__body{grid-column:1}
  body[data-page="servicios"] .mat__media{position:static;max-width:420px}
  body[data-page="servicios"] .subida__grid{grid-template-columns:1fr;gap:32px}
}

@media (max-width:767px){
  body[data-page="servicios"] .tarifa-tbl caption{padding-bottom:12px}
  body[data-page="servicios"] .tarifa-tbl,
  body[data-page="servicios"] .tarifa-tbl tbody,
  body[data-page="servicios"] .tarifa-tbl tr,
  body[data-page="servicios"] .tarifa-tbl th,
  body[data-page="servicios"] .tarifa-tbl td{display:block;width:auto}
  body[data-page="servicios"] .tarifa-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body[data-page="servicios"] .tarifa-tbl tbody tr{
    border:1px solid var(--line);border-radius:2px;background:var(--surface);
    padding:20px;margin-bottom:14px;
  }
  body[data-page="servicios"] .tarifa-tbl tbody tr:hover{background:var(--surface)}
  body[data-page="servicios"] .tarifa-tbl tbody tr:hover th,
  body[data-page="servicios"] .tarifa-tbl tbody tr:hover th:first-child{background:none;box-shadow:none}
  body[data-page="servicios"] .tarifa-tbl tbody th{border:0;padding:0 0 14px;font-size:1.25rem}
  body[data-page="servicios"] .tarifa-tbl td{border:0;border-top:1px solid var(--line);padding:12px 0}
  body[data-page="servicios"] .tarifa-tbl td::before{
    content:attr(data-k);display:block;font-family:var(--f-mono);font-weight:500;font-size:.625rem;
    letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:6px;
  }
  body[data-page="servicios"] .tarifa-tbl td.num{font-size:1.125rem;white-space:normal}
  body[data-page="servicios"] .svc__partidas{grid-template-columns:1fr}
  body[data-page="servicios"] .svc__media,
  body[data-page="servicios"] .svc--rev .svc__media{max-width:none}
  body[data-page="servicios"] .svc-sep .cota__label{font-size:.625rem}
}

/* =========================================================================
   OBRAS.HTML — «Dossier de obra ejecutada»
   ========================================================================= */

body[data-page="obras"] [id^="obra-"]{scroll-margin-top:calc(var(--hdr) + 28px)}

/* --- Cabecera con índice de obras --------------------------------------- */
body[data-page="obras"] .ob-head__grid{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(32px,5vw,64px);align-items:end;
}
body[data-page="obras"] .ob-head .page-head__lead{max-width:46ch}
body[data-page="obras"] .ob-index__title{margin-bottom:14px}
body[data-page="obras"] .ob-index{border:1px solid var(--line);border-radius:2px;background:var(--surface)}
body[data-page="obras"] .ob-index__head,
body[data-page="obras"] .ob-index__row{
  display:grid;
  grid-template-columns:26px minmax(0,1fr) 56px 46px 84px;
  gap:12px;align-items:baseline;padding:10px 16px;
  font-family:var(--f-mono);font-weight:500;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
}
body[data-page="obras"] .ob-index__head{color:var(--grey);border-bottom:1px solid var(--ink)}
body[data-page="obras"] .ob-index li+li .ob-index__row{border-top:1px solid var(--line)}
body[data-page="obras"] .ob-index__row{transition:background-color .15s ease,box-shadow .15s ease}
body[data-page="obras"] .ob-index__row:hover,
body[data-page="obras"] .ob-index__row:focus-visible{background:var(--bg);box-shadow:inset 2px 0 0 var(--accent)}
body[data-page="obras"] .ob-index__n{color:var(--grey)}
body[data-page="obras"] .ob-index__name{
  font-family:var(--f-display);font-weight:600;font-size:.8125rem;letter-spacing:-.01em;
  text-transform:none;line-height:1.25;
}
body[data-page="obras"] .ob-index__foot{margin-top:14px;max-width:42ch}

/* --- Comparador --------------------------------------------------------- */
body[data-page="obras"] .ob-compare{padding-bottom:clamp(48px,6vw,80px)}
body[data-page="obras"] .ob-compare__full{margin-block:clamp(8px,2vw,24px) clamp(28px,4vw,48px)}
body[data-page="obras"] .ob-compare .compare{aspect-ratio:21/9;max-height:76vh;border-radius:0;background:var(--black)}
body[data-page="obras"] .ob-compare .compare>img,
body[data-page="obras"] .ob-compare .compare__after img{width:100%;height:100%;object-fit:cover}
body[data-page="obras"] .ob-compare .compare__handle{width:1px;background:var(--bg);box-shadow:0 0 0 1px rgba(14,21,18,.25)}
body[data-page="obras"] .ob-stack{display:none}

body[data-page="obras"] .ob-datos{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  border-top:1px solid var(--ink);border-left:1px solid var(--line);
}
body[data-page="obras"] .ob-datos__cell{
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:18px 20px;min-height:104px;
}
body[data-page="obras"] .ob-datos__cell--wide{grid-column:span 3}
body[data-page="obras"] .ob-datos dt{
  font-family:var(--f-mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);
}
body[data-page="obras"] .ob-datos dd{
  margin:12px 0 0;font-family:var(--f-mono);font-size:.9375rem;letter-spacing:.01em;line-height:1.5;
}
body[data-page="obras"] .ob-datos__cell--wide dd{font-size:.8125rem;line-height:1.7}

/* --- Rejilla de proyectos ----------------------------------------------- */
body[data-page="obras"] .ob-grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(48px,6vw,88px) var(--gutter);align-items:start;
}
body[data-page="obras"] .ob-proj{margin:0}
body[data-page="obras"] .ob-proj--1{grid-column:1/9}
body[data-page="obras"] .ob-proj--2{grid-column:9/13;margin-top:56px}
body[data-page="obras"] .ob-proj--3{grid-column:1/7;margin-top:24px}
body[data-page="obras"] .ob-proj--4{grid-column:8/13;margin-top:104px}
body[data-page="obras"] .ob-proj--5{grid-column:3/9}
body[data-page="obras"] .ob-proj__img{width:100%;object-fit:cover;background:var(--surface)}
body[data-page="obras"] .ob-proj__img--wide{aspect-ratio:16/10}
body[data-page="obras"] .ob-proj__img--tall{aspect-ratio:3/4}
body[data-page="obras"] .ob-proj__img--sq{aspect-ratio:1/1}
body[data-page="obras"] .ob-proj__tag{margin-top:14px;font-size:.6875rem}
body[data-page="obras"] .ob-proj__title{margin-top:12px}
body[data-page="obras"] .ob-proj__desc{font-size:1rem;line-height:1.6;margin-top:12px;max-width:46ch}
body[data-page="obras"] .ob-acc{margin-top:20px;border-top:1px solid var(--line)}
body[data-page="obras"] .ob-acc .accordion__item{border-bottom:1px solid var(--line)}
body[data-page="obras"] .ob-acc .accordion__btn{
  padding:16px 0;font-family:var(--f-mono);font-weight:500;font-size:.6875rem;
  letter-spacing:.14em;text-transform:uppercase;
}
body[data-page="obras"] .ob-acc .accordion__btn:hover{color:var(--primary)}
body[data-page="obras"] .ob-acc .spec{border-top:0}
body[data-page="obras"] .ob-acc .spec__row{grid-template-columns:minmax(110px,34%) minmax(0,1fr)}
body[data-page="obras"] .ob-acc .spec__row dd{line-height:1.7}
body[data-page="obras"] .ob-grid__foot{margin-top:clamp(40px,5vw,64px);padding-top:20px;border-top:1px solid var(--line)}

/* --- Obra en proceso ----------------------------------------------------- */
body[data-page="obras"] .ob-proceso{padding-block:var(--sec-y);border-top:1px solid var(--line)}
body[data-page="obras"] .ob-proceso__head{margin-bottom:clamp(32px,4vw,56px)}
body[data-page="obras"] .ob-proceso__head .eyebrow{margin-bottom:22px}
body[data-page="obras"] .ob-proceso__lead{margin-top:24px;font-size:1.0625rem;max-width:52ch}
body[data-page="obras"] .ob-proceso__row{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--line);
}
body[data-page="obras"] .ob-proceso__fig{margin:0;background:var(--bg)}
body[data-page="obras"] .ob-proceso__box{
  position:relative;overflow:hidden;height:clamp(300px,46vh,540px);background:var(--black);
}
body[data-page="obras"] .ob-proceso__box img{
  position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;filter:saturate(.85) contrast(1.03);
}
body[data-page="obras"] .ob-proceso__fig .figcap{margin:12px var(--pad) 0 0;padding-left:14px;border-left:1px solid var(--line)}
body[data-page="obras"] .ob-proceso__foot{
  display:flex;flex-wrap:wrap;gap:24px 48px;align-items:flex-end;justify-content:space-between;
  margin-top:clamp(32px,4vw,52px);
}
body[data-page="obras"] .ob-proceso__foot .cota{max-width:420px}

/* --- Referencias --------------------------------------------------------- */
body[data-page="obras"] .ob-ref__head{margin-top:44px}
body[data-page="obras"] .ob-ref .card{border-top-color:rgba(237,233,226,.42)}
body[data-page="obras"] .ob-ref .card__num{color:rgba(237,233,226,.6)}
body[data-page="obras"] .ob-ref .card p{color:rgba(237,233,226,.84)}
body[data-page="obras"] .ob-ref__note{margin-top:clamp(36px,4vw,56px);padding-top:20px;border-top:1px solid var(--hair)}

/* --- Cierre --------------------------------------------------------------- */
body[data-page="obras"] .ob-cierre{background:var(--surface);border-top:1px solid var(--line)}
body[data-page="obras"] .ob-cierre__grid{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,5vw,72px);align-items:start;
}
body[data-page="obras"] .ob-cierre__main{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
body[data-page="obras"] .ob-cierre__main .eyebrow{margin-bottom:2px}
body[data-page="obras"] .ob-cierre__side{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
body[data-page="obras"] .ob-cierre__side .cota{max-width:340px;width:100%}
body[data-page="obras"] .ob-cierre__side .spec{width:100%;margin-top:6px}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width:1024px){
  body[data-page="obras"] .ob-head__grid{grid-template-columns:1fr;gap:40px;align-items:start}
  body[data-page="obras"] .ob-compare .compare{aspect-ratio:16/9}
  body[data-page="obras"] .ob-datos{grid-template-columns:repeat(3,minmax(0,1fr))}
  body[data-page="obras"] .ob-datos__cell--wide{grid-column:span 3}
  body[data-page="obras"] .ob-proj--1{grid-column:1/9}
  body[data-page="obras"] .ob-proj--2{grid-column:9/13;margin-top:32px}
  body[data-page="obras"] .ob-proj--3{grid-column:1/8}
  body[data-page="obras"] .ob-proj--4{grid-column:8/13;margin-top:48px}
  body[data-page="obras"] .ob-proj--5{grid-column:1/8}
  body[data-page="obras"] .ob-proceso__box{height:clamp(240px,34vh,380px)}
  body[data-page="obras"] .ob-cierre__grid{grid-template-columns:1fr;gap:44px}
}
@media (max-width:767px){
  body[data-page="obras"] .ob-index__head,
  body[data-page="obras"] .ob-index__row{grid-template-columns:26px minmax(0,1fr) 48px;padding:12px 14px}
  body[data-page="obras"] .u-sm-hide{display:none}
  body[data-page="obras"] .ob-compare .compare{display:none}
  body[data-page="obras"] .ob-stack{display:block;padding-inline:var(--pad)}
  body[data-page="obras"] .ob-stack__fig{margin:0}
  body[data-page="obras"] .ob-stack__fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
  body[data-page="obras"] .ob-stack__cota{margin:28px 0 24px}
  body[data-page="obras"] .ob-datos{grid-template-columns:1fr;border-left:0}
  body[data-page="obras"] .ob-datos__cell{border-right:0;min-height:0;padding:16px 0}
  body[data-page="obras"] .ob-datos__cell--wide{grid-column:span 1}
  body[data-page="obras"] .ob-grid{grid-template-columns:1fr;gap:56px}
  body[data-page="obras"] .ob-proj--1,
  body[data-page="obras"] .ob-proj--2,
  body[data-page="obras"] .ob-proj--3,
  body[data-page="obras"] .ob-proj--4,
  body[data-page="obras"] .ob-proj--5{grid-column:1;margin-top:0}
  body[data-page="obras"] .ob-proj__img--tall{aspect-ratio:4/5}
  body[data-page="obras"] .ob-proj__img--sq{aspect-ratio:4/3}
  body[data-page="obras"] .ob-proceso__row{grid-template-columns:1fr;gap:32px;background:transparent}
  body[data-page="obras"] .ob-proceso__box{height:clamp(240px,52vw,340px)}
  body[data-page="obras"] .ob-proceso__fig .figcap{margin-inline:var(--pad) var(--pad)}
  body[data-page="obras"] .ob-proceso__foot{flex-direction:column;align-items:flex-start}
}

/* =========================================================================
   PÁGINA: metodo.html — «El plazo no se promete, se replantea»
   ========================================================================= */

/* --- cabecera ----------------------------------------------------------- */
body[data-page="metodo"] .page-head__grid{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(28px,4vw,64px);align-items:end;
}
body[data-page="metodo"] .page-head__aside .page-head__lead{margin-top:0}
body[data-page="metodo"] .head-meta{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter);
  margin-top:clamp(44px,6vw,72px);border-top:1px solid var(--line);padding-top:28px;
}
body[data-page="metodo"] .head-meta__cell .cota{color:var(--ink)}
body[data-page="metodo"] .head-meta__cell .cota__label{color:var(--grey)}
body[data-page="metodo"] .head-meta__v{
  font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;line-height:1;
  font-size:clamp(1.5rem,2.4vw,2rem);margin-top:16px;
}

/* --- índice de fases pegajoso ------------------------------------------- */
body[data-page="metodo"] .fase-nav{
  position:sticky;top:var(--hdr);z-index:40;
  background:rgba(237,233,226,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
body[data-page="metodo"] .fase-nav__inner{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
body[data-page="metodo"] .fase-nav__inner::-webkit-scrollbar{display:none}
body[data-page="metodo"] .fase-nav__link{
  flex:1 0 auto;display:flex;align-items:baseline;gap:10px;white-space:nowrap;
  padding:14px 22px 13px;border-left:1px solid var(--line);
  font-family:var(--f-mono);font-weight:500;font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);
  transition:color .18s ease,box-shadow .18s ease;
}
body[data-page="metodo"] .fase-nav__link:first-child{border-left:0;padding-left:0}
body[data-page="metodo"] .fase-nav__link .n{color:var(--ink);opacity:.45}
body[data-page="metodo"] .fase-nav__link:hover{color:var(--primary)}
body[data-page="metodo"] .fase-nav__link.is-active{color:var(--primary);box-shadow:inset 0 -2px 0 var(--primary)}
body[data-page="metodo"] .fase-nav__link.is-active .n{color:var(--primary);opacity:1}
body[data-page="metodo"] .fase-nav__progress{
  position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--accent);
  transform-origin:0 50%;
}

/* --- timeline maestro --------------------------------------------------- */
body[data-page="metodo"] .escala{margin-bottom:clamp(24px,3vw,40px)}
body[data-page="metodo"] .escala .cota__label{color:var(--grey)}
body[data-page="metodo"] .fases{border-bottom:1px solid var(--line)}
body[data-page="metodo"] .fase{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);
  padding-block:clamp(40px,5.5vw,80px);border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--hdr) + 68px);
}
body[data-page="metodo"] .fase__idx{grid-column:1 / 3}
body[data-page="metodo"] .fase__n{
  font-family:var(--f-mono);font-weight:500;font-size:clamp(2.25rem,4vw,3.5rem);
  line-height:.9;letter-spacing:-.02em;color:var(--ink);
}
body[data-page="metodo"] .fase__tag{
  font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.16em;color:var(--grey);
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
}
body[data-page="metodo"] .fase__main{grid-column:3 / 9}
body[data-page="metodo"] .fase__bar{
  width:var(--w,100%);max-width:100%;min-width:170px;margin:24px 0 22px;
}
body[data-page="metodo"] .fase__bar--accent{color:var(--accent)}
body[data-page="metodo"] .fase__bar--accent .cota__line{opacity:1}
body[data-page="metodo"] .fase__main p{font-size:1.0625rem;line-height:1.6}
body[data-page="metodo"] .fase__deliver{
  grid-column:9 / 13;border-top:1px solid var(--ink);padding-top:16px;align-self:start;
}
body[data-page="metodo"] .fase__deliver-k{
  font-family:var(--f-mono);font-weight:500;font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);
}
body[data-page="metodo"] .fase__deliver ul{margin-top:10px}
body[data-page="metodo"] .fase__deliver li{
  position:relative;padding:12px 0 12px 26px;border-bottom:1px solid var(--line);
  font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.01em;line-height:1.5;
}
body[data-page="metodo"] .fase__deliver li::before{
  content:"";position:absolute;left:0;top:20px;width:14px;height:1px;background:var(--grey);
}
body[data-page="metodo"] .fase__deliver li:last-child{border-bottom:0}
body[data-page="metodo"] .fase__media{grid-column:3 / 8;margin-top:40px}
body[data-page="metodo"] .fase__media img{width:100%;filter:saturate(.9) contrast(1.02)}
body[data-page="metodo"] .fase__aside{
  grid-column:9 / 13;margin-top:40px;display:flex;flex-direction:column;gap:20px;align-items:flex-start;
}
body[data-page="metodo"] .fase__aside p{font-size:1rem;line-height:1.6;color:#3a3a37}

/* --- partidas invisibles ------------------------------------------------ */
body[data-page="metodo"] .invis__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(32px,6vw,96px);
}
body[data-page="metodo"] .invis__item{
  padding:32px 0 30px;border-top:1px solid rgba(237,233,226,.24);
  display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 24px;align-items:start;
}
body[data-page="metodo"] .invis__ico{grid-row:1 / 3;display:block;width:40px;color:rgba(237,233,226,.85)}
body[data-page="metodo"] .invis__ico svg{width:40px;height:40px;display:block}
body[data-page="metodo"] .invis__k{
  font-family:var(--f-mono);font-weight:500;font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bg);line-height:1.5;
}
body[data-page="metodo"] .invis__item p{
  font-size:1rem;line-height:1.6;color:rgba(237,233,226,.78);margin-top:12px;max-width:40ch;
}

/* --- materiales --------------------------------------------------------- */
body[data-page="metodo"] .materiales__grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-items:start;
}
body[data-page="metodo"] .materiales__media{grid-column:1 / 5}
body[data-page="metodo"] .materiales__media img{width:100%;filter:saturate(.9)}
body[data-page="metodo"] .materiales__text{
  grid-column:6 / 13;column-count:2;column-gap:clamp(28px,4vw,56px);
}
body[data-page="metodo"] .materiales__text p{font-size:1.0625rem;line-height:1.6;margin-bottom:20px;break-inside:avoid}
body[data-page="metodo"] .materiales__cota{
  column-span:all;margin:12px 0 26px;max-width:420px;
}
body[data-page="metodo"] .materiales__spec{column-span:all}

/* --- quiénes somos ------------------------------------------------------ */
body[data-page="metodo"] .quienes{background:var(--surface);border-block:1px solid var(--line)}
body[data-page="metodo"] .quienes__grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter) clamp(32px,5vw,72px);align-items:start;
}
body[data-page="metodo"] .quienes__media{grid-column:1 / 5}
body[data-page="metodo"] .quienes__media img{width:100%;filter:saturate(.85) contrast(1.03)}
body[data-page="metodo"] .quienes__body{grid-column:6 / 13}
body[data-page="metodo"] .quienes__body .eyebrow{margin-bottom:20px}
body[data-page="metodo"] .plano-box{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border:1px solid var(--line);border-radius:2px;margin:clamp(32px,4vw,48px) 0 28px;
}
body[data-page="metodo"] .plano-box__f{
  padding:16px 18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:88px;
}
body[data-page="metodo"] .plano-box__f:nth-child(2n){border-right:0}
body[data-page="metodo"] .plano-box__f--wide{grid-column:span 2;border-right:0}
body[data-page="metodo"] .plano-box__f:last-child{border-bottom:0;grid-column:span 2}
body[data-page="metodo"] .plano-box__f .k{
  display:block;font-family:var(--f-mono);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);
}
body[data-page="metodo"] .plano-box__f .v{
  display:block;font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.02em;
  margin-top:10px;line-height:1.5;
}
body[data-page="metodo"] .plano-box__f .v a:hover{color:var(--accent)}
body[data-page="metodo"] .quienes__note{font-size:1.0625rem;line-height:1.6;margin-bottom:24px}

/* --- preguntas ---------------------------------------------------------- */
body[data-page="metodo"] .faq__grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter) clamp(32px,5vw,72px);align-items:start;
}
body[data-page="metodo"] .faq__head{grid-column:1 / 5;position:sticky;top:calc(var(--hdr) + 88px)}
body[data-page="metodo"] .faq__head .h2{margin-top:20px}
body[data-page="metodo"] .faq__head .sec-head__lead{margin-bottom:24px}
body[data-page="metodo"] .faq__list{grid-column:6 / 13}
body[data-page="metodo"] .faq__list .accordion__btn{font-size:1.1875rem;padding:26px 0}
body[data-page="metodo"] .faq__list .accordion__btn:hover{color:var(--primary)}
body[data-page="metodo"] .faq__list .accordion__panel p{max-width:56ch;color:#33332f}

/* --- cierre ------------------------------------------------------------- */
body[data-page="metodo"] .cta-final__inner{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:start;
}
body[data-page="metodo"] .cta-final .h2{margin:18px 0 24px}
body[data-page="metodo"] .cta-final .lead{margin-bottom:32px;color:rgba(237,233,226,.86)}
body[data-page="metodo"] .cta-final__side{
  display:flex;flex-direction:column;gap:20px;align-items:flex-start;
  border-top:1px solid rgba(237,233,226,.28);padding-top:26px;
}
body[data-page="metodo"] .cta-final .tel-big:hover{color:var(--bg);opacity:.75}
body[data-page="metodo"] .cta-final .cota--accent{max-width:340px}
body[data-page="metodo"] .cta-final .spec{width:100%;margin-top:8px}

/* --- responsive --------------------------------------------------------- */
@media (max-width:1180px){
  body[data-page="metodo"] .fase__main{grid-column:3 / 8}
  body[data-page="metodo"] .fase__deliver{grid-column:8 / 13}
  body[data-page="metodo"] .fase__media{grid-column:3 / 8}
  body[data-page="metodo"] .fase__aside{grid-column:8 / 13}
}
@media (max-width:1024px){
  body[data-page="metodo"] .page-head__grid{grid-template-columns:1fr;gap:28px;align-items:start}
  body[data-page="metodo"] .head-meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px var(--gutter)}
  body[data-page="metodo"] .fase{grid-template-columns:1fr;gap:0}
  body[data-page="metodo"] .fase__idx{
    display:flex;align-items:baseline;gap:16px;margin-bottom:18px;
  }
  body[data-page="metodo"] .fase__tag{margin:0;padding:0;border:0}
  body[data-page="metodo"] .fase__main,
  body[data-page="metodo"] .fase__deliver,
  body[data-page="metodo"] .fase__media,
  body[data-page="metodo"] .fase__aside{grid-column:1}
  body[data-page="metodo"] .fase__deliver{margin-top:32px}
  body[data-page="metodo"] .fase__media{max-width:420px}
  body[data-page="metodo"] .invis__grid{grid-template-columns:1fr}
  body[data-page="metodo"] .materiales__media{grid-column:1 / 6}
  body[data-page="metodo"] .materiales__text{grid-column:1 / 13;column-count:1;margin-top:36px}
  body[data-page="metodo"] .quienes__media{grid-column:1 / 6}
  body[data-page="metodo"] .quienes__body{grid-column:1 / 13;margin-top:36px}
  body[data-page="metodo"] .faq__head{grid-column:1 / 13;position:static}
  body[data-page="metodo"] .faq__list{grid-column:1 / 13;margin-top:36px}
  body[data-page="metodo"] .cta-final__inner{grid-template-columns:1fr}
}
@media (max-width:767px){
  body[data-page="metodo"] .head-meta{grid-template-columns:1fr;gap:26px}
  body[data-page="metodo"] .fase-nav__link{padding:12px 16px 11px;font-size:.625rem}
  body[data-page="metodo"] .fase-nav__link .t{display:none}
  body[data-page="metodo"] .fase-nav__link{flex:1 1 auto;justify-content:center}
  body[data-page="metodo"] .fase-nav__link:first-child{padding-left:0}
  body[data-page="metodo"] .fase__bar{width:var(--wm,100%);min-width:0}
  body[data-page="metodo"] .fase__media{max-width:none}
  body[data-page="metodo"] .invis__item{grid-template-columns:1fr;gap:16px}
  body[data-page="metodo"] .invis__ico{grid-row:auto}
  body[data-page="metodo"] .plano-box{grid-template-columns:1fr}
  body[data-page="metodo"] .plano-box__f,
  body[data-page="metodo"] .plano-box__f--wide,
  body[data-page="metodo"] .plano-box__f:last-child{grid-column:span 1;border-right:0;min-height:0}
}
@media (prefers-reduced-motion:reduce){
  body[data-page="metodo"] .fase-nav__progress{transform:none !important}
}

/* =========================================================================
   CONTACTO — hoja de visita técnica
   ========================================================================= */

body[data-page="contacto"] .vt-head__cota{max-width:340px}

/* --- retícula de la página --------------------------------------------- */
body[data-page="contacto"] .vt{padding-block:clamp(48px,7vw,104px)}
body[data-page="contacto"] .vt__grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(40px,5vw,64px) var(--gutter);
  align-items:start;
}
body[data-page="contacto"] .vt__form{grid-column:1/8}
body[data-page="contacto"] .vt__aside{grid-column:9/13}
body[data-page="contacto"] .vt__form-head{margin-bottom:28px}
body[data-page="contacto"] .vt__form-head .eyebrow{margin-bottom:14px}
body[data-page="contacto"] .vt__form-head .h3{font-size:clamp(1.375rem,2.2vw,1.75rem)}

/* --- impreso ------------------------------------------------------------ */
body[data-page="contacto"] .vtf{margin-top:0;padding-top:0;border-top:0;max-width:none}
body[data-page="contacto"] .vtf__head{
  display:flex;flex-wrap:wrap;gap:16px 32px;align-items:flex-end;justify-content:space-between;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:14px 0 16px;
}
body[data-page="contacto"] .vtf__gauge{margin:0;max-width:none}
body[data-page="contacto"] .vtf__gauge-txt{
  display:block;font-family:var(--f-mono);font-weight:500;font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);text-align:right;
}
body[data-page="contacto"] .vtf__gauge-bar{display:block;width:150px;height:1px;background:var(--line);margin-top:9px}
body[data-page="contacto"] .vtf__gauge-bar i{display:block;height:1px;background:var(--primary);transition:width .3s ease}

body[data-page="contacto"] .vtf__row{
  display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--gutter);
  padding:26px 0;border-bottom:1px solid var(--line);
}
body[data-page="contacto"] .vtf__row--last{border-bottom:1px solid var(--ink)}
body[data-page="contacto"] .vtf__idx{
  font-family:var(--f-mono);font-weight:500;font-size:.6875rem;letter-spacing:.16em;color:var(--grey);padding-top:2px;
}
body[data-page="contacto"] .vtf .field{margin-bottom:0}
body[data-page="contacto"] .vtf .field__error{margin-top:12px}
body[data-page="contacto"] .grp{border:0;padding:0;margin:0;min-width:0}
body[data-page="contacto"] .grp legend{padding:0;margin-bottom:6px}

/* select */
body[data-page="contacto"] select.field__input{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231C1C1A' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;
}

/* superficie con unidad */
body[data-page="contacto"] .vtf__unit{display:block;position:relative}
body[data-page="contacto"] .vtf__unit .field__input{padding-right:44px}
body[data-page="contacto"] .vtf__unit>span{
  position:absolute;right:0;bottom:11px;font-family:var(--f-mono);font-size:.8125rem;color:var(--grey);pointer-events:none;
}
body[data-page="contacto"] input[type=number]::-webkit-outer-spin-button,
body[data-page="contacto"] input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
body[data-page="contacto"] input[type=number]{-moz-appearance:textfield}

/* contador */
body[data-page="contacto"] .vtf__count{
  margin-left:auto;font-family:var(--f-mono);font-size:.625rem;letter-spacing:.12em;color:var(--grey);
}

/* --- opciones (radios / casilla) ---------------------------------------- */
body[data-page="contacto"] .opts{margin-top:10px}
body[data-page="contacto"] .opt{
  display:flex;align-items:center;gap:14px;padding:11px 8px;margin-inline:-8px;
  border-top:1px solid var(--line);transition:background-color .15s ease;
}
body[data-page="contacto"] .opt:first-child{border-top:0}
body[data-page="contacto"] .opt:hover{background:var(--surface)}
body[data-page="contacto"] .opt--plain{border-top:0;padding-inline:0;margin-inline:0}
body[data-page="contacto"] .opt--plain:hover{background:transparent}
body[data-page="contacto"] .opts--inline{display:flex;flex-wrap:wrap;gap:4px 32px;margin-top:12px}

body[data-page="contacto"] .opt input[type="radio"],
body[data-page="contacto"] .opt input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;flex:none;width:14px;height:14px;border:1px solid var(--ink);
  border-radius:0;background:transparent;cursor:pointer;margin:0;
  transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
body[data-page="contacto"] .opt input:checked{
  background:var(--primary);border-color:var(--primary);box-shadow:inset 0 0 0 2px var(--bg);
}
body[data-page="contacto"] .opt__name{
  font-family:var(--f-display);font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;cursor:pointer;
}
body[data-page="contacto"] .opt__price{
  margin-left:auto;font-family:var(--f-mono);font-size:.75rem;letter-spacing:.1em;color:var(--grey);white-space:nowrap;
}
body[data-page="contacto"] .opt--consent{align-items:flex-start;gap:14px}
body[data-page="contacto"] .opt--consent input{margin-top:5px}
body[data-page="contacto"] .opt__text{font-size:.9375rem;line-height:1.55;cursor:pointer;max-width:58ch}
body[data-page="contacto"] .grp.is-invalid .opt input{border-color:var(--accent)}

body[data-page="contacto"] .vtf__send{
  display:flex;flex-wrap:wrap;align-items:center;gap:20px 24px;padding-top:28px;
}
body[data-page="contacto"] .vtf__send .note{max-width:34ch;margin:0}

/* --- tarjeta lateral ---------------------------------------------------- */
body[data-page="contacto"] .vt__card{
  background:var(--surface);border:1px solid var(--line);border-radius:2px;
  padding:clamp(24px,2.6vw,32px);position:sticky;top:calc(var(--hdr) + 24px);
}
body[data-page="contacto"] .vt__tel{
  font-size:clamp(2rem,3vw,2.75rem);margin-top:12px;display:block;letter-spacing:-.045em;
}
body[data-page="contacto"] .vt__card-cota{margin-top:16px;max-width:280px}
body[data-page="contacto"] .vt__spec{margin-top:28px}
body[data-page="contacto"] .vt__spec .spec__row{grid-template-columns:minmax(96px,38%) minmax(0,1fr)}
body[data-page="contacto"] .vt__card-title{margin-top:32px;font-size:1.25rem}
body[data-page="contacto"] .steps{margin-top:14px}
body[data-page="contacto"] .step{
  display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid var(--line);
}
body[data-page="contacto"] .step__n{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;color:var(--grey);padding-top:3px}
body[data-page="contacto"] .step p{font-size:.9375rem;line-height:1.55}
body[data-page="contacto"] .vt__fig{margin-top:28px}
body[data-page="contacto"] .vt__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.85) contrast(1.03)}

/* --- localización ------------------------------------------------------- */
body[data-page="contacto"] .loc{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);
}
body[data-page="contacto"] .loc__media{margin:0;position:relative;min-height:460px;overflow:hidden;background:var(--black)}
body[data-page="contacto"] .loc__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.7) contrast(1.05);
}
body[data-page="contacto"] .loc__panel{
  padding:clamp(40px,6vw,88px) var(--pad) clamp(40px,6vw,88px) clamp(32px,4vw,64px);
  display:flex;flex-direction:column;align-items:flex-start;gap:24px;
}
body[data-page="contacto"] .loc__panel .eyebrow{margin-bottom:-8px}
body[data-page="contacto"] .loc__text{font-size:1.0625rem}
body[data-page="contacto"] .plate{
  width:100%;max-width:620px;border:1px solid var(--line);border-radius:2px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--bg);
}
body[data-page="contacto"] .plate__f{padding:16px 18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:84px}
body[data-page="contacto"] .plate__f:nth-child(2n){border-right:0}
body[data-page="contacto"] .plate__f--wide{grid-column:span 2;border-right:0;min-height:0}
body[data-page="contacto"] .plate__f:nth-last-child(-n+1){border-bottom:0}
body[data-page="contacto"] .plate__f .k{
  display:block;font-family:var(--f-mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);
}
body[data-page="contacto"] .plate__f .v{
  display:block;font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.02em;margin-top:9px;line-height:1.5;
}
body[data-page="contacto"] .plate__f .v a:hover{color:var(--accent)}

/* --- tira de tarifas, versión clara ------------------------------------- */
body[data-page="contacto"] .tarifas--light{
  background:transparent;color:var(--ink);--hair:var(--line);
  border-bottom:1px solid var(--line);padding-block:clamp(44px,6vw,72px);
}
body[data-page="contacto"] .tarifas--light .tarifas__head .eyebrow{margin-bottom:12px}
body[data-page="contacto"] .tarifas--light .tarifas__head .h3{font-size:clamp(1.375rem,2.2vw,1.75rem)}
body[data-page="contacto"] .tarifas--light .tarifa__price{color:var(--ink)}
body[data-page="contacto"] .tarifas--light .strip-index{color:var(--grey)}
body[data-page="contacto"] .tarifas--light .note{color:var(--grey)}

/* --- cierre ------------------------------------------------------------- */
body[data-page="contacto"] .cierre-tel{padding-block:clamp(56px,7vw,104px)}
body[data-page="contacto"] .cierre-tel__inner{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,4vw,56px) var(--gutter);align-items:end;
}
body[data-page="contacto"] .cierre-tel .eyebrow{margin-bottom:20px}
body[data-page="contacto"] .cierre-tel .lead{margin-top:24px;color:rgba(237,233,226,.85)}
body[data-page="contacto"] .cierre-tel__btns{margin-top:32px}
body[data-page="contacto"] .cierre-tel__big{
  font-size:clamp(2.25rem,4.6vw,3.5rem);display:block;margin-bottom:20px;
}
body[data-page="contacto"] .cierre-tel__big:hover{color:var(--bg);opacity:.78}
body[data-page="contacto"] .cierre-tel__num .cota{max-width:360px}

/* --- responsive --------------------------------------------------------- */
@media (max-width:1024px){
  body[data-page="contacto"] .vt__grid{grid-template-columns:1fr}
  body[data-page="contacto"] .vt__form,
  body[data-page="contacto"] .vt__aside{grid-column:1}
  body[data-page="contacto"] .vt__card{position:static}
  body[data-page="contacto"] .loc{grid-template-columns:1fr}
  body[data-page="contacto"] .loc__media{min-height:300px}
  body[data-page="contacto"] .loc__panel{padding:clamp(36px,6vw,56px) var(--pad)}
  body[data-page="contacto"] .cierre-tel__inner{grid-template-columns:1fr;align-items:start}
}
@media (max-width:767px){
  body[data-page="contacto"] .vtf__row{grid-template-columns:1fr;gap:10px;padding:22px 0}
  body[data-page="contacto"] .vtf__idx{padding-top:0}
  body[data-page="contacto"] .vtf__head{flex-direction:column;align-items:flex-start}
  body[data-page="contacto"] .vtf__gauge-txt{text-align:left}
  body[data-page="contacto"] .opt{flex-wrap:wrap}
  body[data-page="contacto"] .opt__price{margin-left:28px;width:100%}
  body[data-page="contacto"] .opts--inline{flex-direction:column;gap:12px}
  body[data-page="contacto"] .plate{grid-template-columns:1fr}
  body[data-page="contacto"] .plate__f,
  body[data-page="contacto"] .plate__f--wide{grid-column:span 1;border-right:0;min-height:0}
  body[data-page="contacto"] .vt__fig img{aspect-ratio:3/2}
  body[data-page="contacto"] .vt-head__cota{max-width:none}
}