/* Hallmark · genre: modern-minimal · macrostructure: Split Studio · theme: custom
 * vibe: "taller de precisión, luz de día, verde de marca"
 * paper oklch(98.5% 0.004 120) · accent oklch(56% 0.17 148) green · Archivo + Geist (etiquetas: Archivo 500 en versalitas)
 * axes: light / display-heavy grotesque / chromatic-green
 * nav: N10 floating-on-scroll morph · footer: Ft1 mast-headed · hero: H2 split diptych 7/5 (photo right)
 * enrichment: none (fotografía real del taller) · pre-emit critique: P4 H5 E4 S5 R5 V4
 * v3 · sep-2026 · integrametal.cl */

:root{
  --color-paper:      oklch(98.5% 0.004 120);
  --color-paper-2:    oklch(96.2% 0.006 120);
  --color-paper-3:    oklch(93.5% 0.008 120);
  --color-ink:        oklch(21% 0.012 150);
  --color-ink-2:      oklch(44% 0.012 150);
  --color-ink-3:      oklch(49% 0.01 150);
  --color-rule:       oklch(89% 0.006 120);
  --color-rule-2:     oklch(82% 0.008 120);
  --color-accent:     oklch(47% 0.155 148);  /* verde del logo, oscurecido para que el blanco pase AA */
  --color-accent-ink: oklch(40% 0.14 148);   /* verde para texto sobre claro (AA) */
  --color-accent-vivo:oklch(60% 0.19 148);   /* el verde brillante del logo: solo detalles gráficos */
  --color-accent-soft:oklch(94% 0.04 148);
  --color-on-accent:  oklch(99% 0.01 148);
  --color-band:       oklch(24% 0.014 150);  /* única banda oscura: el cierre */
  --color-band-ink:   oklch(96% 0.006 120);
  --color-band-ink-2: oklch(76% 0.01 150);
  --color-focus:      oklch(56% 0.17 148);
  --color-error:      oklch(52% 0.18 28);

  --font-display: "Archivo", "Archivo Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-outlier: "Archivo", "Archivo Fallback", ui-sans-serif, system-ui, sans-serif;

  --space-3xs:.25rem; --space-2xs:.5rem; --space-xs:.75rem; --space-sm:1rem; --space-md:1.5rem;
  --space-lg:2rem; --space-xl:3rem; --space-2xl:4.5rem; --space-3xl:7rem;

  --text-xs:.75rem; --text-sm:.875rem; --text-md:1.0625rem; --text-lg:1.25rem; --text-xl:1.5625rem;
  --text-2xl:1.95rem; --text-3xl:2.45rem;
  --text-display:   clamp(2.5rem, 4.6vw + .6rem, 4.4rem);
  --text-display-s: clamp(2rem, 3.2vw + .5rem, 3.2rem);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in:  cubic-bezier(.7,0,.84,0);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-short:180ms; --dur-mid:260ms;
  --rule-1:1px solid var(--color-rule);
  --radius-1:6px; --radius-2:10px; --radius-pill:999px;
  --wrap:1180px;
  color-scheme: light;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  margin:0;overflow-x:clip;
  font-family:var(--font-body);font-size:var(--text-md);line-height:1.6;
  color:var(--color-ink);background:var(--color-paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-accent-ink);text-decoration:none;text-underline-offset:.18em}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:-.022em;line-height:1.08;overflow-wrap:anywhere;min-width:0}
h1{font-size:var(--text-display)}
h2{font-size:var(--text-3xl);letter-spacing:-.02em}
h3{font-size:var(--text-xl);letter-spacing:-.012em;line-height:1.2}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--space-md)}
.lede{font-size:var(--text-lg);color:var(--color-ink-2);max-width:56ch;line-height:1.5}
.mono{font-family:var(--font-outlier);font-weight:500;font-size:var(--text-sm);letter-spacing:.02em;color:var(--color-ink-2)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- botones (dos voces, ocho estados) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:.75rem 1.25rem;
  font-family:var(--font-body);font-weight:600;font-size:var(--text-md);line-height:1.2;white-space:nowrap;
  border-radius:var(--radius-1);border:1.5px solid transparent;cursor:pointer;
  transition:background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out);
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn-primary{background:var(--color-accent);color:var(--color-on-accent)}
.btn-primary:hover{background:var(--color-accent-ink);color:var(--color-on-accent)}
.btn-outline{border-color:var(--color-rule-2);color:var(--color-ink);background:transparent}
.btn-outline:hover{border-color:var(--color-ink);color:var(--color-ink)}
.band .btn-outline{border-color:oklch(60% 0.01 150);color:var(--color-band-ink)}
.band .btn-outline:hover{border-color:var(--color-band-ink)}
.btn svg{width:18px;height:18px;flex:none}
.link-arrow{font-weight:600;color:var(--color-accent-ink);display:inline-flex;align-items:center;gap:.35rem;min-height:44px}
.link-arrow::after{content:"→";transition:transform var(--dur-short) var(--ease-out)}
.link-arrow:hover::after{transform:translateX(3px)}
.link-arrow:hover{text-decoration:none}

/* ---------- N10 · barra que se vuelve píldora al bajar ---------- */
.nav{position:sticky;top:0;z-index:40;padding:0;transition:padding var(--dur-mid) var(--ease-out)}
.nav__inner{
  position:relative;max-width:var(--wrap);margin-inline:auto;padding:.7rem var(--space-md);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);
  background:color-mix(in oklch,var(--color-paper) 88%,transparent);
  backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:var(--rule-1);
  transition:border-radius var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid) var(--ease-out),padding var(--dur-mid) var(--ease-out),max-width var(--dur-mid) var(--ease-out);
}
.nav.is-floating{padding:var(--space-xs) var(--space-sm)}
.nav.is-floating .nav__inner{
  max-width:1040px;border-radius:var(--radius-pill);border:var(--rule-1);
  box-shadow:0 10px 30px -12px oklch(20% 0.02 150 / .28);padding:.45rem .6rem .45rem 1rem;
}
@media(min-width:901px){
  /* los enlaces del centro se centran respecto a la barra, no al hueco que dejan logo y botones */
  .nav__links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
  /* al bajar, «Cotizar» pinta todo el extremo derecho de la píldora: sin margen, a todo alto, con el mismo redondeo */
  .nav.is-floating .nav__cta{align-self:stretch;margin:calc(-.45rem - 1px) calc(-.6rem - 1px) calc(-.45rem - 1px) 0}
  .nav.is-floating .nav__cta .btn-primary{align-self:stretch;min-height:0;border-radius:0 var(--radius-pill) var(--radius-pill) 0;padding:.6rem 1.5rem .6rem 1.3rem}
  .nav.is-floating .nav__cta .btn-outline{align-self:center}
}
.brand{display:inline-flex;align-items:center;min-height:44px}
.brand img{height:34px;width:auto}
.nav__links{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}
.solo-movil{display:none}
@media(max-width:900px){.solo-movil{display:block}}
.nav__links a{display:inline-flex;align-items:center;min-height:44px;padding:0 .8rem;border-radius:var(--radius-pill);color:var(--color-ink-2);font-weight:500;font-size:var(--text-sm);white-space:nowrap}
.nav__links a:hover{color:var(--color-ink);background:var(--color-paper-2);text-decoration:none}
.nav__links a[aria-current="page"]{color:var(--color-ink);background:var(--color-paper-2)}
.nav__cta{display:inline-flex;gap:.5rem;align-items:center}
.nav__cta .btn{min-height:44px;padding:.6rem 1rem;font-size:var(--text-sm)}
.nav__burger{display:none;width:44px;height:44px;border:var(--rule-1);border-radius:var(--radius-1);background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav__burger span{display:block;width:18px;height:2px;background:var(--color-ink);border-radius:2px}
@media(max-width:900px){
  /* en móvil la barra no se vuelve píldora: logo a la izquierda, [Cotizar][☰] a la derecha */
  .nav.is-floating{padding:0}
  .nav.is-floating .nav__inner{max-width:none;border-radius:0;border:0;border-bottom:var(--rule-1);box-shadow:0 8px 24px -16px oklch(20% 0.02 150 / .25);padding:.6rem var(--space-md)}
  .nav__inner{gap:var(--space-xs)}
  .brand img{height:30px}
  .nav__links{display:none}
  .nav__cta{margin-left:auto}
  .nav__cta .btn-outline{display:none}
  .nav__burger{display:flex;border-radius:var(--radius-1);border-color:var(--color-rule-2)}
  .nav.is-open .nav__burger{background:var(--color-paper-2)}
  .nav.is-open .nav__links{display:flex;position:absolute;left:var(--space-sm);right:var(--space-sm);top:calc(100% + 6px);flex-direction:column;align-items:stretch;background:var(--color-paper);border:var(--rule-1);border-radius:var(--radius-2);padding:.5rem;box-shadow:0 18px 40px -20px oklch(20% 0.02 150 / .35)}
  .nav.is-open .nav__links a{width:100%;border-radius:var(--radius-1);min-height:48px;font-size:var(--text-md)}
  .nav.is-open .nav__links li:last-child a{border-top:var(--rule-1);border-radius:0 0 var(--radius-1) var(--radius-1)}
}

/* ---------- H2 · hero díptico 7/5 ---------- */
.hero{padding:var(--space-2xl) 0 var(--space-xl)}
.hero__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--space-2xl);align-items:center}
.hero h1{max-width:16ch}
.hero .lede{margin-top:var(--space-md)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-lg)}
.hero__quien{margin-top:var(--space-sm);font-size:var(--text-sm);color:var(--color-ink-2)}
.hero__media{position:relative;min-width:0}
.hero__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-2)}
.hero__media figcaption{margin-top:var(--space-2xs);font-family:var(--font-outlier);font-size:var(--text-xs);color:var(--color-ink-3);letter-spacing:.02em}
.hero--interior{padding-top:var(--space-xl)}
.hero--interior h1{font-size:var(--text-display-s)}
.miga{font-size:var(--text-sm);color:var(--color-ink-3);margin-bottom:var(--space-sm)}
.miga a{color:var(--color-ink-2);text-decoration:underline;text-decoration-color:var(--color-rule-2)}
@media(max-width:900px){
  .hero{padding-top:var(--space-xl)}
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}
  .hero__media{order:-1}
  .hero__media img{aspect-ratio:3/2}
}

/* ---------- T2 · muro de clientes con reglas finas ---------- */
.logos{padding:var(--space-lg) 0}
.logos__label{font-size:var(--text-sm);color:var(--color-ink-3);margin:0 0 var(--space-sm)}
.logos__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:var(--rule-1);border-left:var(--rule-1)}
.logos__row span{display:flex;align-items:center;justify-content:center;min-height:88px;padding:var(--space-sm) var(--space-md);border-right:var(--rule-1);border-bottom:var(--rule-1);font-family:var(--font-display);font-weight:600;font-size:var(--text-md);letter-spacing:-.01em;color:var(--color-ink-2);text-align:center;overflow-wrap:anywhere}
.logo-cliente img{height:40px;width:auto;max-width:100%;object-fit:contain;opacity:.72;transition:opacity var(--dur-short) var(--ease-out)}
.logo-cliente:hover img{opacity:1}
.logo-cliente{gap:.55rem}
.logo-cliente small{font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);letter-spacing:-.01em;color:var(--color-ink-2);line-height:1.15;text-align:left}
@media(max-width:700px){.logos__row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- secciones y cabezas S2 (colgantes, sin numerar) ---------- */
.section{padding:var(--space-2xl) 0}
.section--tight{padding:var(--space-xl) 0}
.section--alt{background:var(--color-paper-2)}
.section__head{max-width:62ch;margin-bottom:var(--space-lg)}
.section__head p{color:var(--color-ink-2);margin:var(--space-xs) 0 0;font-size:var(--text-lg)}

/* ---------- Split Studio · módulos alternados ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-2xl);align-items:center;padding:var(--space-xl) 0}
.split + .split{border-top:var(--rule-1)}
.split:nth-child(even) .split__media{order:-1}
.split__text h2{font-size:var(--text-2xl)}
.split__text p{color:var(--color-ink-2);margin-top:var(--space-sm)}
.split__links{list-style:none;padding:0;margin:var(--space-md) 0 0;display:flex;flex-direction:column}
.split__links a{display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);min-height:48px;padding:.5rem 0;border-top:var(--rule-1);color:var(--color-ink);font-weight:500}
.split__links li:last-child a{border-bottom:var(--rule-1)}
.split__links a::after{content:"→";color:var(--color-accent-ink)}
.split__links a:hover{text-decoration:none;color:var(--color-accent-ink)}
.split__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-2)}
.split__media figcaption{margin-top:var(--space-2xs);font-family:var(--font-outlier);font-size:var(--text-xs);color:var(--color-ink-3)}
@media(max-width:900px){
  .split{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}
  .split:nth-child(even) .split__media{order:0}
  .split__media{order:-1}
}

/* ---------- F3 · hoja de especificaciones ---------- */
.spec{width:100%;border-collapse:collapse;border-top:var(--rule-1)}
.spec th,.spec td{padding:var(--space-sm) 0;border-bottom:var(--rule-1);vertical-align:top;text-align:left}
.spec th{width:30%;font-family:var(--font-body);font-weight:600;color:var(--color-ink);padding-right:var(--space-md)}
.spec td{color:var(--color-ink-2)}
.spec td small{display:block;font-family:var(--font-outlier);font-size:var(--text-xs);color:var(--color-ink-3);margin-top:.2rem}
@media(max-width:600px){.spec th,.spec td{display:block;width:auto}.spec th{border-bottom:0;padding-bottom:.15rem}.spec td{padding-top:0}}

/* ---------- F4 · pasos ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg);counter-reset:paso}
.steps li{counter-increment:paso;padding-top:var(--space-sm);border-top:2px solid var(--color-ink)}
.steps li::before{content:counter(paso,decimal-leading-zero);font-family:var(--font-outlier);font-weight:600;font-size:var(--text-sm);color:var(--color-accent-ink);letter-spacing:.06em}
.steps b{display:block;font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);letter-spacing:-.012em;margin:.35rem 0 .4rem}
.steps p{color:var(--color-ink-2);margin:0;font-size:var(--text-sm)}
@media(max-width:800px){.steps{grid-template-columns:minmax(0,1fr)}}

/* ---------- T4 · franja de datos ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:var(--rule-1);border-bottom:var(--rule-1)}
.stats div{padding:var(--space-md) var(--space-md) var(--space-md) 0}
.stats div + div{border-left:var(--rule-1);padding-left:var(--space-md)}
.stats b{display:block;font-family:var(--font-display);font-size:var(--text-2xl);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.stats span{display:block;margin-top:.35rem;font-size:var(--text-sm);color:var(--color-ink-2)}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stats div:nth-child(3){border-left:0;padding-left:0}.stats div:nth-child(n+3){border-top:var(--rule-1)}}

/* ---------- índice de servicios (filas con regla, no tarjetas) ---------- */
.index{list-style:none;margin:0;padding:0;border-top:var(--rule-1)}
.index a{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) auto;gap:var(--space-md);align-items:center;padding:var(--space-sm) 0;border-bottom:var(--rule-1);color:var(--color-ink);min-height:56px}
.index a:hover{text-decoration:none}
.index a:hover b{color:var(--color-accent-ink)}
.index b{font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:-.012em;font-weight:600}
.index span{color:var(--color-ink-2);font-size:var(--text-sm)}
.index i{font-style:normal;color:var(--color-accent-ink)}
@media(max-width:700px){.index a{grid-template-columns:minmax(0,1fr) auto}.index span{grid-column:1/-1}}
.ind-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg)}
.ind-grid a{color:var(--color-ink);min-width:0}
.ind-grid a:hover{text-decoration:none}
.ind-grid a:hover b{color:var(--color-accent-ink)}
.ind-grid img{aspect-ratio:3/2;object-fit:cover;width:100%;border-radius:var(--radius-2)}
.ind-grid b{display:block;margin-top:var(--space-sm);font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:-.012em}
.ind-grid span{display:block;color:var(--color-ink-2);font-size:var(--text-sm);margin-top:.25rem}
@media(max-width:800px){.ind-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- prosa y galería en páginas interiores ---------- */
.two{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-2xl);align-items:start}
.prose{max-width:64ch;font-size:var(--text-md)}
.prose p{color:var(--color-ink-2)}
.prose strong{color:var(--color-ink);font-weight:600}
.prose .quote{font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:-.012em;line-height:1.25;color:var(--color-ink);margin:var(--space-lg) 0;padding-left:var(--space-md);border-left:3px solid var(--color-accent)}
.prose .cta-row{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-lg)}
.gallery{display:grid;gap:var(--space-md)}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-2)}
.gallery figcaption{margin-top:var(--space-2xs);font-family:var(--font-outlier);font-size:var(--text-xs);color:var(--color-ink-3)}
.signature{margin-top:var(--space-lg);padding-top:var(--space-sm);border-top:var(--rule-1)}
.signature b{display:block;font-family:var(--font-display);font-size:var(--text-lg)}
.signature span{font-size:var(--text-sm);color:var(--color-ink-2)}
.techlist{list-style:none;margin:var(--space-md) 0;padding:0}
.techlist li{padding:var(--space-sm) 0;border-top:var(--rule-1);color:var(--color-ink-2)}
.techlist li:last-child{border-bottom:var(--rule-1)}
.techlist b{display:block;color:var(--color-ink);font-weight:600;margin-bottom:.15rem}
.clients-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:var(--rule-1);border-left:var(--rule-1);margin:var(--space-lg) 0}
.clients-grid span{display:flex;align-items:center;justify-content:center;min-height:96px;padding:var(--space-sm) var(--space-md);border-right:var(--rule-1);border-bottom:var(--rule-1);font-family:var(--font-display);font-weight:600;color:var(--color-ink-2);text-align:center;overflow-wrap:anywhere}
.clients-grid .logo-cliente img{height:44px}
@media(max-width:900px){.two{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}}
@media(max-width:600px){.clients-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- preguntas frecuentes (summary sin flex: rompe <details>) ---------- */
.faq{max-width:76ch;border-top:var(--rule-1)}
.faq details{border-bottom:var(--rule-1)}
.faq summary{cursor:pointer;list-style:none;padding:var(--space-sm) 2.5rem var(--space-sm) 0;font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);letter-spacing:-.012em;position:relative;min-height:44px;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.25rem;top:var(--space-sm);font-family:var(--font-outlier);font-size:1.3rem;color:var(--color-accent-ink);line-height:1.2}
.faq details[open] summary::after{content:"–"}
.faq .resp{padding:0 0 var(--space-md);max-width:66ch;color:var(--color-ink-2)}

/* ---------- formulario de cotización (ocho estados) ---------- */
.form{display:grid;gap:var(--space-sm)}
.field label{display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:.35rem}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:1rem;padding:.7rem .85rem;min-height:48px;border:1.5px solid var(--color-rule-2);border-radius:var(--radius-1);background:var(--color-paper);color:var(--color-ink);transition:border-color var(--dur-short) var(--ease-out);color-scheme:light}
.field textarea{resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--color-ink-3)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px;border-color:var(--color-accent)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--color-error)}
.field--2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm)}
@media(max-width:560px){.field--2{grid-template-columns:minmax(0,1fr)}}
.form__note{font-size:var(--text-sm);color:var(--color-ink-3);margin:0}
.form__actions{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.form__ok{margin:0;padding:var(--space-xs) var(--space-sm);background:var(--color-accent-soft);color:var(--color-accent-ink);border-radius:var(--radius-1);font-size:var(--text-sm)}
.form__err{margin:0;color:var(--color-error);font-size:var(--text-sm)}
.card{border:var(--rule-1);border-radius:var(--radius-2);padding:var(--space-md);background:var(--color-paper)}
.card + .card{margin-top:var(--space-sm)}
.card .role{font-family:var(--font-display);font-weight:500;font-size:var(--text-xs);color:var(--color-ink-3);letter-spacing:.1em;text-transform:uppercase}
.card h3,.card h2{margin:.25rem 0 var(--space-xs);font-size:var(--text-xl);letter-spacing:-.012em}
.card .row{display:flex;justify-content:space-between;gap:var(--space-sm);padding:.45rem 0;border-top:var(--rule-1);font-size:var(--text-sm)}
.card .row span{color:var(--color-ink-2)}
.card .row a{font-weight:500;min-height:0}

/* ---------- banda de cierre (única superficie oscura) ---------- */
.band{background:var(--color-band);color:var(--color-band-ink);padding:var(--space-2xl) 0}
.band h2{max-width:20ch;color:var(--color-band-ink)}
.band p{color:var(--color-band-ink-2);max-width:52ch}
.band .cta{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-md)}
.band .btn-primary{background:var(--color-accent)}
.band a:not(.btn){color:var(--color-band-ink)}

/* ---------- pie oscuro en columnas (logo · servicios · empresa · cotice ahora) ---------- */
.footer{background:var(--color-band);color:var(--color-band-ink-2);padding:var(--space-2xl) 0 var(--space-lg);font-size:var(--text-sm)}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr));gap:var(--space-xl) var(--space-lg)}
.footer__brand img{height:36px;width:auto;margin-bottom:var(--space-md)}
.footer__dir{display:flex;align-items:flex-start;gap:.6rem;margin:0 0 .35rem;color:var(--color-band-ink-2);line-height:1.4}
.footer__dir a{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;color:var(--color-band-ink);text-decoration:none}
.footer__dir a:hover{color:var(--color-accent-vivo)}
.footer__dir svg{width:18px;height:18px;flex:none;color:var(--color-accent-vivo);margin-top:.15rem}
.footer__dir a svg{margin-top:0}
.footer__col h2{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;letter-spacing:-.01em;color:var(--color-band-ink);margin:0 0 var(--space-sm)}
.footer__col ul{list-style:none;margin:0;padding:0}
.footer__col li a{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;color:var(--color-band-ink-2);text-decoration:none;line-height:1.3}
.footer__col li a::before{content:"›";font-family:var(--font-display);font-size:1.1rem;color:var(--color-accent-vivo);line-height:1;transition:transform var(--dur-short) var(--ease-out)}
.footer__col li a:hover{color:var(--color-band-ink)}
.footer__col li a:hover::before{transform:translateX(3px)}
.footer__col--cta{display:flex;flex-direction:column;gap:var(--space-xs);align-items:flex-start}
.footer__col--cta h2{margin-bottom:var(--space-2xs)}
.footer__col--cta .btn{width:100%;max-width:280px;justify-content:center}
.footer__col--cta .btn-outline{border-color:oklch(52% 0.01 150);color:var(--color-band-ink)}
.footer__col--cta .btn-outline:hover{border-color:var(--color-band-ink)}
.footer__quien{margin:.35rem 0 0;font-size:var(--text-xs);color:var(--color-band-ink-2)}
.footer__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-xs) var(--space-md);margin-top:var(--space-xl);padding-top:var(--space-sm);border-top:1px solid oklch(36% 0.012 150);color:var(--color-band-ink-2)}
.footer__meta a{color:var(--color-band-ink);display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0 .35rem;text-decoration:underline;text-decoration-color:oklch(52% 0.01 150)}
.footer__meta a:hover{color:var(--color-accent-vivo)}
@media(max-width:900px){.footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer__brand{grid-column:1/-1}}
@media(max-width:560px){.footer__grid{grid-template-columns:minmax(0,1fr)}.footer__col--cta .btn{max-width:none}}

/* ---------- landings de Ads ---------- */
.lp .hero__grid{align-items:start}
.lp-bullets{list-style:none;margin:var(--space-md) 0 0;padding:0;display:grid;gap:.4rem}
.lp-bullets li{padding-left:1.4rem;position:relative;color:var(--color-ink-2)}
.lp-bullets li::before{content:"";position:absolute;left:0;top:.55em;width:.6rem;height:.6rem;border-radius:2px;background:var(--color-accent-vivo)}
.lp-form{border:var(--rule-1);border-radius:var(--radius-2);padding:var(--space-md);background:var(--color-paper)}
.lp-form h2{font-size:var(--text-xl);margin-bottom:var(--space-sm)}
.nav--lp .nav__links{display:none}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ---------- barra fija inferior (solo móvil): Llamar + WhatsApp siempre a mano ---------- */
.barra{display:none}
@media(max-width:900px){
  .barra{display:grid;grid-template-columns:1fr 1.3fr;gap:.5rem;position:fixed;left:0;right:0;bottom:0;z-index:45;padding:.5rem var(--space-sm) calc(.5rem + env(safe-area-inset-bottom));background:color-mix(in oklch,var(--color-paper) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:var(--rule-1)}
  .barra .btn{justify-content:center;min-height:48px}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}

/* ---------- CTA intermedio (home) ---------- */
.cta-strip{border-top:var(--rule-1);border-bottom:var(--rule-1);background:var(--color-accent-soft)}
.cta-strip__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-sm) var(--space-lg);padding-top:var(--space-md);padding-bottom:var(--space-md)}
.cta-strip p{margin:0;color:var(--color-ink-2);max-width:56ch}
.cta-strip p b{color:var(--color-ink);font-weight:600}
.cta-strip__btns{display:flex;flex-wrap:wrap;gap:var(--space-xs)}

/* ---------- LP: todo el gancho en la primera pantalla de escritorio ---------- */
.lp .hero{padding-top:var(--space-lg);padding-bottom:var(--space-lg)}
.lp .hero h1{font-size:var(--text-display-s);max-width:18ch}
.lp .lede{font-size:var(--text-md);margin-top:var(--space-xs)}
.lp .lp-bullets{grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem .8rem;margin-top:var(--space-sm);font-size:var(--text-sm)}
.lp .hero__cta{margin-top:var(--space-md)}
.lp-form{padding:var(--space-sm) var(--space-md) var(--space-md)}
.lp-form h2{font-size:var(--text-lg);margin-bottom:var(--space-xs)}
.lp-form .form{gap:.6rem}
.lp-form .field label{margin-bottom:.2rem}
.lp-form .field input,.lp-form .field select,.lp-form .field textarea{min-height:42px;padding:.5rem .7rem}
.lp-form .form__note{font-size:var(--text-xs)}
@media(max-width:560px){.lp .lp-bullets{grid-template-columns:minmax(0,1fr)}}