/* ==========================================================================
   Laboratorio DICOFAR — Sitio público (home + base común del blog)
   Estructura inspirada en ibm.com/es-es · Paleta de marca Dicofar
   Mobile-first. Cortes: 480 · 672 · 1056 · 1312 px.

   Índice
   1. Tokens            6. Header, mega menú y drawer   11. Blog en el home
   2. Reset y base      7. Footer y newsletter          12. Secciones del home
   3. Layout            8. Barra de acción móvil        13. Formulario de cotización
   4. Tipografía        9. Carruseles (rail)            14. Modal
   5. Botones y links  10. Estados (skeleton, vacío)
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* Marca */
  --blue: #3c5ea8;
  --blue-700: #2f4c8c;
  --blue-800: #243b6e;
  --blue-50: #eef2fa;
  --blue-100: #dde5f5;
  --teal: #19dcd8;
  --teal-700: #0b8f8c;
  --navy: #0e1a33;
  --navy-2: #16264a;
  --navy-3: #0a1224;

  /* Neutros */
  --ink: #141821;
  --ink-2: #3a3f4b;
  --muted: #5f6675;
  --line: #e0e3ea;
  --line-strong: #c6cbd6;
  --bg: #ffffff;
  --bg-alt: #f3f5f9;

  /* Estados */
  --danger: #c4262e;
  --danger-bg: #fdf0f0;
  --success: #1f7a4d;
  --success-bg: #edf7f1;

  /* Tipografía */
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --max: 1312px;
  --gutter: 16px;
  --header-h: 56px;
  --section-y: 48px;
  --actionbar-h: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --ease: cubic-bezier(0.2, 0, 0.38, 0.9);
}
@media (min-width: 672px) { :root { --gutter: 24px; --header-h: 64px; --section-y: 64px; } }
@media (min-width: 1056px) { :root { --gutter: 32px; --section-y: 96px; } }

/* 2. Reset y base ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; -webkit-tap-highlight-color: rgba(60, 94, 168, 0.12); }
@supports (overflow: clip) { body { overflow-x: clip; } }
img { display: block; max-width: 100%; height: auto; }
svg { flex: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; border-radius: 0; }
h1, h2, h3, h4, p, ul, ol, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
p, li { text-wrap: pretty; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.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; }
.hp { position: absolute !important; left: 0; top: 0; width: 1px !important; height: 1px !important; overflow: hidden; opacity: 0; pointer-events: none; clip-path: inset(50%); }
.skip { position: absolute; left: 8px; top: -80px; z-index: 100; background: var(--blue); color: #fff; padding: 12px 16px; }
.skip:focus { top: 8px; }
body.no-scroll { overflow: hidden; }
@media (max-width: 479px) { .hide-sm { display: none; } }
.nowrap { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* 3. Layout ----------------------------------------------------------------- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-left: max(var(--gutter), var(--safe-l)); padding-right: max(var(--gutter), var(--safe-r)); }
.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); }
.stack { display: grid; gap: 12px; }
@media (min-width: 672px) { .stack { gap: 16px; } }

.section-head { display: grid; gap: 12px; margin-bottom: 28px; }
.section-head .lead { font-size: 1rem; }
.section-head--compact { margin-bottom: 24px; }
.section-head--flush { margin-bottom: 0; }
.section-head--link { grid-template-columns: 1fr auto; align-items: end; gap: 16px; }
.section-head__more { white-space: nowrap; min-height: 44px; }
@media (max-width: 479px) {
  .section-head--link { grid-template-columns: 1fr; gap: 8px; }
  .section-head__more { justify-self: start; }
}
@media (min-width: 672px) { .section-head { gap: 16px; margin-bottom: 40px; } .section-head .lead { font-size: 1.0625rem; } }
@media (min-width: 1056px) {
  .section-head { grid-template-columns: 5fr 7fr; align-items: end; gap: 32px; margin-bottom: 56px; }
  .section-head--compact { grid-template-columns: 1fr; margin-bottom: 40px; }
  .section-head--link { grid-template-columns: 1fr auto; margin-bottom: 40px; }
  .section-head--flush { margin-bottom: 0; }
}

/* 4. Tipografía ------------------------------------------------------------- */
.eyebrow { font-family: var(--mono); font-size: 12px; line-height: 1.4; letter-spacing: 0.02em; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--teal); flex: none; }
@media (min-width: 672px) { .eyebrow { font-size: 13px; } }
.display { font-weight: 300; font-size: clamp(2.125rem, 1.35rem + 3.6vw, 4.5rem); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.display em { font-style: normal; color: var(--blue); }
.h2 { font-weight: 300; font-size: clamp(1.625rem, 1.2rem + 1.9vw, 2.875rem); line-height: 1.16; letter-spacing: -0.01em; text-wrap: balance; }
.h3 { font-weight: 400; font-size: 1.25rem; line-height: 1.35; }
.lead { font-size: clamp(1rem, 0.93rem + 0.35vw, 1.25rem); line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.body-2 { font-size: 15px; color: var(--muted); }

/* 5. Botones y links -------------------------------------------------------- */
.btn { --h: 52px; position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-height: var(--h); padding: 0 16px 0 18px; font-size: 15px; font-weight: 400; line-height: 1.2; border: 1px solid transparent; transition: background-color 110ms var(--ease), color 110ms var(--ease), border-color 110ms var(--ease); white-space: nowrap; text-align: left; }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform 150ms var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: default; }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-700); }
.btn--primary:active { background: var(--blue-800); }
.btn--ghost { border-color: var(--blue); color: var(--blue); background: transparent; }
.btn--ghost:hover { background: var(--blue-50); }
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: var(--blue-50); }
.btn--teal { background: var(--teal); color: var(--navy); }
.btn--teal:hover { background: #4ee6e3; }
.btn--sm { --h: 40px; gap: 16px; font-size: 14px; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading svg { display: none; }
.btn.is-loading::after { content: ""; width: 16px; height: 16px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 479px) { .btn-row .btn { width: 100%; } }

.link { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-size: 15px; }
.link svg { width: 16px; height: 16px; transition: transform 150ms var(--ease); }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link:hover svg { transform: translateX(3px); }

.icon-btn { width: 48px; height: 48px; display: grid; place-items: center; color: var(--ink-2); flex: none; }
.icon-btn:hover { background: var(--bg-alt); color: var(--ink); }
.icon-btn svg { width: 20px; height: 20px; }

/* 6. Header ----------------------------------------------------------------- */
.header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); transition: box-shadow 150ms var(--ease); }
.header.is-scrolled { box-shadow: 0 8px 20px -18px rgba(14, 26, 51, 0.55); }
.header__bar { display: flex; align-items: center; height: var(--header-h); gap: 8px; }
.brand { display: flex; align-items: center; height: 100%; flex: none; color: var(--blue); margin-right: auto; }
.brand svg { height: 34px; width: auto; }
@media (min-width: 672px) { .brand svg { height: 42px; } }
@media (min-width: 1056px) { .brand { border-right: 1px solid var(--line); padding-right: 20px; margin-right: 8px; } }

.nav { display: none; height: 100%; }
@media (min-width: 1056px) { .nav { display: flex; } }
.nav__item { position: static; height: 100%; }
.nav__link { height: 100%; display: flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 14.5px; color: var(--ink-2); border-bottom: 2px solid transparent; white-space: nowrap; transition: color 110ms, border-color 110ms, background-color 110ms; }
@media (min-width: 1200px) { .nav__link { padding: 0 14px; } }
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--ink); background: var(--bg-alt); }
.nav__link[aria-expanded="true"], .nav__link[aria-current="page"] { border-bottom-color: var(--blue); color: var(--ink); }
.nav__link svg { width: 14px; height: 14px; transition: transform 150ms var(--ease); }
.nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }

.header__actions { margin-left: auto; display: flex; align-items: center; gap: 4px; height: 100%; }
.header__phone { display: none; font-size: 14px; color: var(--ink-2); padding: 0 14px; height: 100%; align-items: center; gap: 8px; white-space: nowrap; }
.header__phone svg { width: 16px; height: 16px; color: var(--blue); }
.header__phone:hover { background: var(--bg-alt); color: var(--ink); }
@media (min-width: 1312px) { .header__phone { display: inline-flex; } }
.header__cta { --h: 44px; gap: 10px; padding: 0 14px; }
.header__cta svg { display: none; }
.header__cta-long { display: none; }
@media (min-width: 672px) {
  .header__cta { --h: 44px; gap: 16px; padding: 0 16px 0 18px; }
  .header__cta svg { display: block; }
  .header__cta-long { display: inline; }
  .header__cta-short { display: none; }
}
@media (min-width: 1056px) { .header__cta { --h: 40px; } }
@media (min-width: 1056px) and (max-width: 1199px) {
  .header__cta-long { display: none; }
  .header__cta-short { display: inline; }
}
.menu-toggle { display: grid; margin-right: -12px; }
.menu-toggle[aria-expanded="true"] .i-open, .menu-toggle[aria-expanded="false"] .i-close { display: none; }
@media (min-width: 672px) { .menu-toggle { margin-right: -8px; } }
@media (min-width: 1056px) { .menu-toggle { display: none; } }

/* Mega menú */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgba(14, 26, 51, 0.25); display: none; }
.mega.is-open { display: block; }
.mega__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-block: 32px 40px; }
.mega__col h3 { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.mega__col a { display: block; padding: 9px 0; font-size: 15px; color: var(--ink-2); }
.mega__col a:hover { color: var(--blue); }
.mega__col a small { display: block; font-size: 13px; color: var(--muted); }
.mega__promo { background: var(--bg-alt); padding: 24px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.mega__promo p { font-size: 15px; color: var(--ink-2); }

/* Drawer móvil */
.drawer { position: fixed; inset: var(--header-h) 0 0 0; background: #fff; z-index: 49; overflow-y: auto; overscroll-behavior: contain; display: none; border-top: 1px solid var(--line); }
.drawer.is-open { display: block; }
@media (min-width: 1056px) { .drawer { display: none !important; } }
.drawer__list > li { border-bottom: 1px solid var(--line); }
.drawer__link { width: 100%; min-height: 56px; display: flex; justify-content: space-between; align-items: center; padding: 0 max(var(--gutter), var(--safe-r)) 0 max(var(--gutter), var(--safe-l)); font-size: 17px; text-align: left; }
.drawer__link:hover { background: var(--bg-alt); }
.drawer__link svg { width: 18px; height: 18px; transition: transform 150ms; }
.drawer__link[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer__sub { display: none; padding: 0 var(--gutter) 12px; }
.drawer__sub.is-open { display: block; }
.drawer__sub a { display: flex; align-items: center; min-height: 44px; padding: 0 0 0 16px; border-left: 1px solid var(--line); color: var(--ink-2); font-size: 15.5px; }
.drawer__sub a:hover { color: var(--blue); border-left-color: var(--blue); }
.drawer__foot { padding: 24px var(--gutter) calc(32px + var(--safe-b)); display: grid; gap: 12px; }
.drawer__foot .btn { width: 100%; }

/* 7. Footer ----------------------------------------------------------------- */
.footer { background: var(--navy-3); color: #c9d2e6; padding-top: 40px; }
@media (min-width: 672px) { .footer { padding-top: 64px; } }
.footer a:focus-visible, .footer summary:focus-visible, .footer button:focus-visible, .footer input:focus-visible { outline-color: var(--teal); }
.footer__head { display: grid; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.footer__head > *, .newsletter > * { min-width: 0; }
@media (min-width: 1056px) { .footer__head { grid-template-columns: 5fr 7fr; gap: 32px; padding-bottom: 48px; align-items: start; } }
.footer__brand { display: grid; gap: 16px; align-content: start; }
.footer__brand svg { height: 36px; width: auto; color: #fff; }
@media (min-width: 672px) { .footer__brand svg { height: 40px; } }
.footer__brand p { font-size: 14px; color: #a9b5cf; max-width: 40ch; }

.newsletter { display: grid; gap: 8px; max-width: 560px; }
@media (min-width: 1056px) { .newsletter { justify-self: end; width: 100%; } }
.newsletter__title { font-size: 16px; font-weight: 600; color: #fff; }
.newsletter__desc { font-size: 14px; color: #a9b5cf; }
.newsletter__row { display: flex; gap: 0; margin-top: 8px; }
.newsletter__row input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; font-size: 16px; background: rgba(255, 255, 255, 0.06); color: #fff; border: 1px solid rgba(255, 255, 255, 0.24); border-right: 0; border-radius: 0; }
.newsletter__row input::placeholder { color: #8391ad; }
.newsletter__row input:focus { outline: 2px solid var(--teal); outline-offset: -2px; background: rgba(255, 255, 255, 0.1); }
.newsletter__row input[aria-invalid="true"] { border-color: #ff8a8f; }
.newsletter__row .btn { --h: 48px; gap: 12px; flex: none; }
.newsletter__msg { font-size: 13.5px; min-height: 0; color: #a9b5cf; }
.newsletter__msg:empty { display: none; }
.newsletter__msg.is-error { color: #ffb3b6; }
.newsletter__msg.is-success { color: var(--teal); }

.footer__cols { display: grid; }
@media (min-width: 672px) { .footer__cols { grid-template-columns: repeat(3, 1fr); gap: 32px; padding-block: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } }
@media (min-width: 1056px) { .footer__cols { grid-template-columns: repeat(5, 1fr); padding-block: 48px; } }
.footer__group { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
@media (min-width: 672px) { .footer__group { border-bottom: 0; } }
.footer__title { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-size: 15px; font-weight: 600; color: #fff; cursor: pointer; }
.footer__title::-webkit-details-marker { display: none; }
.footer__title svg { width: 16px; height: 16px; color: #a9b5cf; transition: transform 150ms var(--ease); }
.footer__group[open] .footer__title svg { transform: rotate(180deg); }
.footer__group ul { display: grid; gap: 0; padding-bottom: 12px; }
.footer__group ul a { display: flex; align-items: center; min-height: 44px; font-size: 14.5px; color: #a9b5cf; }
.footer__group ul a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 672px) {
  .footer__title { min-height: 0; margin-bottom: 12px; font-size: 14px; cursor: default; }
  .footer__title svg { display: none; }
  .footer__group ul { gap: 4px; padding-bottom: 0; }
  .footer__group ul a { min-height: 32px; font-size: 14px; }
}
.footer__bottom { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding-block: 20px 28px; font-size: 13px; color: #8391ad; }
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.footer__legal > span { flex-basis: 100%; }
@media (min-width: 672px) { .footer__legal > span { flex-basis: auto; } }
.footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__legal a:hover { color: #fff; }
.footer__team { color: #8391ad; }
.social { display: flex; gap: 4px; margin-left: -10px; }
@media (min-width: 672px) { .social { margin-left: 0; } }
.social a { width: 44px; height: 44px; display: grid; place-items: center; color: #c9d2e6; }
.social a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.social svg { width: 20px; height: 20px; }

/* 8. Barra de acción móvil + WhatsApp flotante ------------------------------ */
.actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: 1.15fr 1fr 1fr; background: #fff; border-top: 1px solid var(--line); padding: 0 var(--safe-r) var(--safe-b) var(--safe-l); box-shadow: 0 -10px 24px -20px rgba(14, 26, 51, 0.6); transform: translateY(0); visibility: visible; transition: transform 220ms var(--ease), visibility 0s linear 0s; }
.actionbar.is-hidden { transform: translateY(105%); visibility: hidden; transition: transform 220ms var(--ease), visibility 0s linear 220ms; }
.actionbar__item { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--actionbar-h); font-size: 14.5px; color: var(--ink); }
.actionbar__item + .actionbar__item { border-left: 1px solid var(--line); }
/* 320-359 px: las tres columnas no pueden crecer más que la pantalla. */
.actionbar { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 359px) { .actionbar__item { gap: 6px; font-size: 13.5px; } }
.actionbar__item svg { width: 18px; height: 18px; color: var(--blue); }
.actionbar__item .actionbar__wa { color: #1f8f4e; width: 20px; height: 20px; }
.actionbar__item:active { background: var(--bg-alt); }
.actionbar__item--primary { background: var(--blue); color: #fff; }
.actionbar__item--primary svg { color: #fff; }
.actionbar__item--primary:active { background: var(--blue-800); }
/* El espacio para la barra se reserva al final del footer (mismo fondo) */
body.has-actionbar .footer { padding-bottom: calc(var(--actionbar-h) + var(--safe-b)); }
body.has-actionbar:not(:has(.footer)) { padding-bottom: calc(var(--actionbar-h) + var(--safe-b)); }
@media (min-width: 672px) {
  .actionbar { display: none; }
  body.has-actionbar .footer { padding-bottom: 0; }
  body.has-actionbar:not(:has(.footer)) { padding-bottom: 0; }
}

.wa { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: none; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 14px; background: #1a7f45; color: #fff; font-size: 15px; box-shadow: 0 8px 24px -8px rgba(10, 18, 36, 0.45); transition: background-color 110ms, transform 150ms var(--ease), opacity 150ms var(--ease), visibility 0s linear 0s; }
.wa.is-hidden { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 150ms var(--ease), transform 150ms var(--ease), visibility 0s linear 150ms; }
.wa:hover { background: #146a39; transform: translateY(-2px); }
.wa svg { width: 22px; height: 22px; }
@media (min-width: 672px) { .wa { display: inline-flex; right: 24px; bottom: 24px; } }
/* Tablet y celular apaisado: solo el ícono (52 × 52). Con la etiqueta tapaba títulos y textos del borde derecho. */
@media (min-width: 672px) and (max-width: 1055px) {
  .wa { width: 52px; padding: 0; justify-content: center; }
  .wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* 9. Carruseles (rail) ------------------------------------------------------ */
.rail { --rail-gap: 12px; --rail-w: 82%; }
.rail [data-rail-track] { display: grid; grid-auto-flow: column; grid-auto-columns: var(--rail-w); gap: var(--rail-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); padding-bottom: 2px; }
.rail [data-rail-track]::-webkit-scrollbar { display: none; }
.rail [data-rail-track] > * { scroll-snap-align: start; min-width: 0; }
.rail [data-rail-track]:focus-visible { outline-offset: -2px; }
.rail__controls { display: none; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.rail.is-scrollable .rail__controls { display: flex; }
.rail__pager { display: flex; flex: 0 1 200px; min-width: 0; }
.rail__dot { position: relative; flex: 1; height: 44px; min-width: 24px; }
.rail__dot::before { content: ""; position: absolute; left: 0; right: 4px; top: 50%; height: 2px; margin-top: -1px; background: var(--line-strong); transition: background-color 150ms, height 150ms, margin 150ms; }
.rail__dot[aria-current="true"]::before { background: var(--blue); height: 4px; margin-top: -2px; }
.rail__dot:hover::before { background: var(--ink-2); }
.rail__dot:focus-visible { outline-offset: -2px; }
.rail__arrows { display: flex; gap: 1px; }
.rail__arrows button { width: 44px; height: 44px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); color: var(--ink); }
.rail__arrows button:hover:not(:disabled) { background: var(--blue-50); }
.rail__arrows button:disabled { color: var(--line-strong); cursor: default; }
.rail__arrows svg { width: 18px; height: 18px; }
@media (min-width: 672px) { .rail { --rail-gap: 16px; } .rail__arrows button { width: 48px; height: 48px; } }

/* 10. Estados --------------------------------------------------------------- */
.sk { display: block; background: #e6eaf1; animation: sk-pulse 1.4s ease-in-out infinite; }
.sk--line { height: 12px; margin-top: 10px; }
.sk--title { height: 22px; margin-top: 14px; width: 85%; }
.sk--w30 { width: 30%; } .sk--w60 { width: 60%; } .sk--w90 { width: 90%; }
@keyframes sk-pulse { 50% { opacity: 0.5; } }
.state-box { display: grid; gap: 12px; justify-items: start; padding: 28px 24px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--blue); }
.state-box h3 { font-size: 1.125rem; font-weight: 400; }
.state-box p { font-size: 15px; color: var(--muted); max-width: 60ch; }
.state-box--error { border-left-color: var(--danger); }

/* 11. Blog en el home ------------------------------------------------------- */
.home-blog .rail { --rail-w: 80%; }
.posts { list-style: none; }
.post { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); min-width: 0; transition: border-color 150ms var(--ease); }
.post:hover { border-color: var(--line-strong); }
.post:hover .post__title a { color: var(--blue); }
.post:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.post:focus-within .post__title a:focus-visible { outline: none; }
.post__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--blue-100); }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.post:hover .post__media img { transform: scale(1.03); }
.post__flag { position: absolute; top: 12px; left: 12px; background: #fff; color: var(--ink); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.02em; padding: 4px 8px; }
.post__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 20px; flex: 1; }
.post__cat { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.post__cat i { width: 8px; height: 8px; flex: none; background: var(--blue); }
.post__title { font-size: 1.0625rem; line-height: 1.35; font-weight: 400; }
.post__title a { transition: color 110ms; }
.post__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.post__excerpt { display: none; font-size: 15px; color: var(--muted); }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--muted); }
.post__meta span { display: inline-flex; align-items: center; gap: 6px; }
.post__meta svg { width: 14px; height: 14px; }
.post--featured .post__title { font-size: 1.25rem; }
.post--skeleton { pointer-events: none; }
.post--skeleton .post__media { background: #e6eaf1; animation: sk-pulse 1.4s ease-in-out infinite; }

@media (min-width: 672px) {
  .home-blog .rail [data-rail-track] { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none; }
  .post--featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .post--featured .post__media { aspect-ratio: auto; min-height: 280px; }
  .post--featured .post__body { padding: 28px 28px 28px; gap: 12px; }
  .post--featured .post__title { font-size: 1.625rem; line-height: 1.25; font-weight: 300; }
  .post--featured .post__excerpt { display: block; }
}
@media (min-width: 1056px) {
  .home-blog .rail [data-rail-track] { grid-template-columns: 7fr 5fr; grid-template-rows: auto auto auto 1fr; gap: 16px 32px; }
  .post--featured { grid-column: 1; grid-row: 1 / -1; display: flex; }
  .post--featured .post__media { aspect-ratio: 16 / 9; min-height: 0; }
  .post--featured .post__body { padding: 28px 32px 32px; }
  .post--featured .post__title { font-size: 2rem; }
  .post:not(.post--featured) { grid-column: 2; flex-direction: row; border-width: 0 0 1px; background: transparent; padding-bottom: 16px; }
  .post:not(.post--featured):hover { border-color: var(--line-strong); }
  .post:not(.post--featured) .post__media { flex: none; width: 168px; aspect-ratio: 4 / 3; align-self: flex-start; }
  .post:not(.post--featured) .post__body { padding: 0 0 0 20px; gap: 6px; }
  .post:not(.post--featured) .post__meta { padding-top: 4px; }
}

/* 12. Secciones del home ---------------------------------------------------- */
/* Hero */
.hero { padding-top: 28px; }
@media (min-width: 672px) { .hero { padding-top: 56px; } }
@media (min-width: 1056px) { .hero { padding-top: 80px; } }
.hero__text { display: grid; gap: 16px; max-width: 1040px; }
@media (min-width: 672px) { .hero__text { gap: 24px; } .hero__text .lead { margin-top: 8px; } }
.hero__ctas { margin-top: 8px; }
@media (min-width: 672px) { .hero__ctas { margin-top: 16px; } }
.hero__media { position: relative; margin-top: 32px; }
@media (min-width: 672px) { .hero__media { margin-top: 48px; } }
@media (min-width: 1056px) { .hero__media { margin-top: 64px; } }
.hero__img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--blue-100); }
@media (min-width: 672px) { .hero__img { aspect-ratio: 16 / 8; } }
@media (min-width: 1056px) { .hero__img { aspect-ratio: 16 / 7; } }
.hero__img img { width: 100%; height: 100%; object-fit: cover; }
.spec { display: grid; gap: 4px; padding: 16px; background: var(--navy); color: #fff; border-top: 3px solid var(--teal); }
.spec__k { font-family: var(--mono); font-size: 12px; color: #a9b5cf; letter-spacing: 0.02em; }
.spec__v { font-size: 15.5px; line-height: 1.4; }
@media (min-width: 672px) {
  .spec { position: absolute; z-index: 1; left: 32px; bottom: 32px; max-width: 360px; padding: 20px; gap: 6px; background: #fff; color: var(--ink); }
  .spec__k { color: var(--muted); }
  .spec__v { font-size: 17px; }
}

/* Novedades */
.ticker { border-bottom: 1px solid var(--line); }
.ticker__inner { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label pager" "text text"; column-gap: 16px; row-gap: 4px; padding-block: 8px 16px; align-items: center; }
@media (min-width: 672px) { .ticker__inner { grid-template-columns: 140px 1fr auto; grid-template-areas: "label text pager"; gap: 24px; padding-block: 20px; } }
.ticker__label { grid-area: label; font-family: var(--mono); font-size: 12px; color: var(--muted); }
@media (min-width: 672px) { .ticker__label { font-size: 13px; } }
.ticker__viewport { grid-area: text; position: relative; min-height: 24px; }
.ticker__item { display: none; font-size: 15px; line-height: 1.45; }
@media (min-width: 672px) { .ticker__item { font-size: 16px; } }
.ticker__item.is-active { display: block; animation: fade 400ms var(--ease); }
.ticker__item a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.ticker__pager { grid-area: pager; display: flex; }
.ticker__pager button { width: 40px; height: 44px; font-family: var(--mono); font-size: 13px; color: var(--muted); border-bottom: 2px solid var(--line); }
.ticker__pager button[aria-current="true"] { color: var(--ink); border-bottom-color: var(--blue); }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Destacamos */
.rail--cards { --rail-w: 78%; }
.cards > li { display: flex; }
.card { background: #fff; padding: 20px; min-height: 212px; width: 100%; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); transition: background-color 150ms var(--ease); }
.card:hover { background: var(--bg-alt); }
.card__tag { font-family: var(--mono); font-size: 12px; color: var(--blue); letter-spacing: 0.02em; }
.card__title { font-size: 1.125rem; line-height: 1.38; font-weight: 400; }
.card__desc { font-size: 14.5px; color: var(--muted); }
.card__arrow { margin-top: auto; color: var(--blue); width: 22px; height: 22px; transition: transform 150ms var(--ease); }
.card:hover .card__arrow { transform: translateX(4px); }
@media (min-width: 672px) {
  .rail--cards [data-rail-track] { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, 1fr); gap: 1px; overflow: visible; margin-inline: 0; padding: 0; scroll-snap-type: none; background: var(--line); border: 1px solid var(--line); }
  .card { border: 0; padding: 24px; min-height: 240px; gap: 12px; }
  .card__title { font-size: 1.1875rem; line-height: 1.4; }
  .card__desc { font-size: 15px; }
}
@media (min-width: 1056px) { .rail--cards [data-rail-track] { grid-template-columns: repeat(4, 1fr); } }

/* Cifras */
.rail--stats { --rail-w: 82%; }
@media (min-width: 672px) { .rail--stats { --rail-w: calc((100% - 16px) / 2); } }
@media (min-width: 1056px) {
  .rail--stats { --rail-w: calc((100% - 48px) / 3.3); }
  .rail--stats [data-rail-track] { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
}
.stat { background: #fff; display: flex; flex-direction: column; }
.stat__img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--blue-100); }
@media (min-width: 672px) { .stat__img { aspect-ratio: 16 / 10; } }
.stat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.stat:hover .stat__img img { transform: scale(1.03); }
.stat__body { padding: 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
@media (min-width: 672px) { .stat__body { padding: 24px; gap: 16px; } }
.stat__body p { font-size: 15px; color: var(--ink-2); }
@media (min-width: 672px) { .stat__body p { font-size: 15.5px; } }
.stat__num { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.stat__num strong { display: block; font-weight: 300; font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); line-height: 1; color: var(--blue); letter-spacing: -0.02em; }
.stat__num span { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); }
.stat--solid { background: var(--navy); color: #fff; }
.stat--solid .stat__body { justify-content: flex-end; }
.stat--solid .stat__body p { color: #c9d2e6; }
.stat--solid .stat__num { border-top-color: rgba(255, 255, 255, 0.16); margin-top: 0; }
.stat--solid .stat__num strong { color: var(--teal); }
.stat--solid .stat__num span { color: #a9b5cf; }

/* Capacidades */
.caps { display: grid; gap: 24px; }
@media (min-width: 672px) { .caps { gap: 40px; } }
@media (min-width: 1056px) { .caps { grid-template-columns: 4fr 8fr; gap: 32px; } .caps__intro { position: sticky; top: calc(var(--header-h) + 40px); align-self: start; } }
.caps__intro { display: grid; gap: 12px; }
@media (min-width: 672px) { .caps__intro { gap: 20px; } .caps__intro .lead { font-size: 1.0625rem; } }
.caps__cta { justify-self: start; margin-top: 8px; }
.caps__list { border-bottom: 1px solid var(--line); }
.cap { border-top: 1px solid var(--line); }
.cap > summary { list-style: none; display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 2px; align-items: center; min-height: 64px; padding: 12px 0; cursor: pointer; }
.cap > summary::-webkit-details-marker { display: none; }
.cap > summary:focus-visible { outline-offset: -2px; }
.cap__meta { grid-column: 1; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--muted); text-transform: uppercase; }
.cap__title { grid-column: 1; font-size: 1.0625rem; font-weight: 400; line-height: 1.35; transition: color 110ms; }
.cap__chev { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--ink-2); transition: transform 150ms var(--ease); }
.cap[open] .cap__chev { transform: rotate(180deg); }
.cap > summary:hover .cap__title { color: var(--blue); }
.cap__body { display: grid; gap: 10px; justify-items: start; padding: 0 32px 18px 0; }
.cap__body p { font-size: 15px; color: var(--muted); max-width: 46ch; }
.cap__body .link { min-height: 44px; }
@media (min-width: 672px) {
  .caps__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; border-bottom: 0; }
  .cap > summary { cursor: default; min-height: 0; padding: 24px 0 8px; row-gap: 6px; }
  .cap__chev { display: none; }
  .cap > summary:hover .cap__title { color: inherit; }
  .cap:hover .cap__title { color: var(--blue); }
  .cap__title { font-size: 1.125rem; }
  .cap__meta { font-size: 12px; }
  .cap__body { padding: 0 0 24px; gap: 8px; }
  .cap__body .link { min-height: 36px; }
}

/* Plantas */
.plants { display: grid; gap: 16px; }
@media (min-width: 1056px) { .plants { grid-template-columns: 1fr 1fr; gap: 32px; } }
.plants__tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line-strong); }
@media (min-width: 1056px) { .plants__tabs { display: none !important; } }
.plants__tabs [role="tab"] { min-height: 48px; padding: 0 8px; font-size: 15px; color: var(--ink-2); border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color 110ms, border-color 110ms, background-color 110ms; }
.plants__tabs [role="tab"]:hover { color: var(--ink); background: rgba(255, 255, 255, 0.6); }
.plants__tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--blue); font-weight: 600; }
.plants__tabs [role="tab"]:focus-visible { outline-offset: -2px; }
@media (max-width: 359px) { .plants__tabs [role="tab"] { padding: 0 4px; font-size: 14px; line-height: 1.25; } }
.plant { background: #fff; display: flex; flex-direction: column; border: 1px solid var(--line); }
.plant__img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--blue-100); }
.plant__img img { width: 100%; height: 100%; object-fit: cover; }
.plant__badge { position: absolute; top: 12px; left: 12px; background: #fff; font-family: var(--mono); font-size: 11.5px; padding: 5px 9px; letter-spacing: 0.02em; }
@media (min-width: 672px) { .plant__badge { top: 16px; left: 16px; font-size: 12px; padding: 6px 10px; } }
.plant__body { padding: 20px 16px 24px; display: grid; gap: 16px; flex: 1; align-content: start; }
@media (min-width: 672px) { .plant__body { padding: 36px 40px 40px; gap: 20px; } }
.plant__title { font-weight: 300; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2.125rem); line-height: 1.2; letter-spacing: -0.01em; }
.plant__body > p { color: var(--ink-2); font-size: 15px; }
@media (min-width: 672px) { .plant__body > p { font-size: 16px; } }
.checks { display: grid; gap: 8px; }
@media (min-width: 400px) { .checks { grid-template-columns: 1fr 1fr; column-gap: 16px; } }
@media (min-width: 672px) { .checks { gap: 10px; column-gap: 24px; } }
.checks li { display: flex; gap: 8px; font-size: 14.5px; color: var(--ink-2); line-height: 1.4; }
@media (min-width: 672px) { .checks li { font-size: 15px; gap: 10px; } }
.checks li::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 3px; background: no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 11.3 3.2 8l-.9.9 4.2 4.2 7.2-7.2-.9-.9z' fill='%233c5ea8'/%3E%3C/svg%3E"); }
.plant__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding-top: 12px; border-top: 1px solid var(--line); margin-top: auto; }
@media (min-width: 672px) { .plant__foot { padding-top: 20px; gap: 16px; } }
.plant__foot .link { min-height: 44px; }
.plant__cert { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* Proceso: línea de tiempo vertical en móvil */
.steps { display: grid; counter-reset: step; }
.step { position: relative; display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; row-gap: 6px; padding-bottom: 24px; align-content: start; }
.step::before { counter-increment: step; content: "0" counter(step); grid-column: 1; grid-row: 1 / span 3; align-self: start; width: 40px; height: 40px; display: grid; place-items: center; background: #fff; border: 1px solid var(--blue); color: var(--blue); font-family: var(--mono); font-size: 13px; position: relative; z-index: 1; }
.step::after { content: ""; position: absolute; left: 20px; top: 40px; bottom: 0; width: 1px; background: var(--line-strong); }
.step:last-child { padding-bottom: 0; }
.step:last-child::after { display: none; }
.step > * { grid-column: 2; }
.step h3 { font-size: 1.125rem; font-weight: 400; line-height: 1.3; padding-top: 8px; }
.step p { font-size: 15px; color: var(--muted); }
.step__time { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
@media (min-width: 672px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 28px 24px 32px 0; border-top: 1px solid var(--line); }
  .step::before { grid-row: auto; width: auto; height: auto; display: block; background: none; border: 0; justify-self: start; }
  .step::after { left: 0; top: -1px; bottom: auto; width: 48px; height: 3px; background: var(--blue); }
  .step:last-child { padding-bottom: 32px; }
  .step:last-child::after { display: block; }
  .step > * { grid-column: 1; }
  .step h3 { font-size: 1.1875rem; padding-top: 0; }
  .step__time { font-size: 12px; }
}
@media (min-width: 1056px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* Clientes */
.clients { display: grid; grid-template-columns: repeat(3, 1fr); border-left: 1px solid var(--line); border-top: 1px solid var(--line); background: #fff; }
@media (min-width: 672px) { .clients { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1056px) { .clients { grid-template-columns: repeat(8, 1fr); } }
.client { min-height: 64px; display: grid; place-items: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; color: #6b7282; text-align: center; padding: 8px 6px; transition: color 150ms, background-color 150ms; }
@media (min-width: 672px) { .client { min-height: 96px; font-size: 17px; } }
.client:hover { color: var(--ink); background: var(--bg-alt); }
.client--cta { grid-column: 1 / -1; padding: 0; }
@media (min-width: 672px) { .client--cta { grid-column: auto; } }
.client--cta a { width: 100%; height: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 400; font-size: 15px; color: var(--blue); }
.client--cta a:hover { background: var(--blue-50); }
.client--cta svg { width: 16px; height: 16px; }

/* Calidad (sección oscura) */
.quality { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.quality::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 64px 64px; pointer-events: none; }
.quality .container { position: relative; }
.quality .eyebrow { color: #a9b5cf; }
.quality .lead { color: #c9d2e6; }
.quality :focus-visible { outline-color: var(--teal); }
.certs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.12); margin-top: 28px; }
@media (min-width: 672px) { .certs { margin-top: 48px; } }
@media (min-width: 1056px) { .certs { grid-template-columns: repeat(4, 1fr); } }
.cert { background: var(--navy); padding: 16px 14px 18px; display: flex; flex-direction: column; gap: 8px; transition: background-color 150ms; }
@media (min-width: 672px) { .cert { padding: 28px 24px; gap: 12px; min-height: 220px; } }
.cert:hover { background: var(--navy-2); }
.cert__seal { width: 32px; height: 32px; color: var(--teal); }
@media (min-width: 672px) { .cert__seal { width: 44px; height: 44px; } }
.cert h3 { font-size: 1rem; font-weight: 400; line-height: 1.3; }
@media (min-width: 672px) { .cert h3 { font-size: 1.1875rem; } }
.cert p { font-size: 13px; line-height: 1.45; color: #a9b5cf; }
@media (min-width: 672px) { .cert p { font-size: 14.5px; } }
.cert__id { font-family: var(--mono); font-size: 11px; color: var(--teal); margin-top: auto; padding-top: 4px; }
@media (min-width: 672px) { .cert__id { font-size: 12px; } }
.quality__foot { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; margin-top: 24px; }
@media (min-width: 672px) { .quality__foot { margin-top: 32px; } }
.quality__foot p { font-size: 14px; color: #a9b5cf; max-width: 60ch; }
@media (max-width: 479px) { .quality__foot .btn { width: 100%; } }

/* Aceite Esmeralda */
.brand-band { display: grid; background: var(--bg-alt); }
@media (min-width: 672px) and (max-width: 1055px) { .brand-band { grid-template-columns: 2fr 3fr; } }
@media (min-width: 1056px) { .brand-band { grid-template-columns: 1fr 1fr; } }
.brand-band__img { aspect-ratio: 16 / 10; overflow: hidden; background: #e7e2d8; }
@media (min-width: 672px) { .brand-band__img { aspect-ratio: auto; min-height: 100%; } }
@media (min-width: 1056px) { .brand-band__img { min-height: 520px; } }
.brand-band__img img { width: 100%; height: 100%; object-fit: cover; }
.brand-band__body { padding: 24px 16px 28px; display: grid; gap: 14px; align-content: center; }
@media (min-width: 672px) { .brand-band__body { padding: 40px 32px; gap: 20px; } }
@media (min-width: 1056px) { .brand-band__body { padding: 64px; } }
.brand-band__lead { font-size: 1rem; line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
@media (min-width: 672px) { .brand-band__lead { font-size: 1.0625rem; } }
.brand-band__since { display: flex; align-items: baseline; gap: 14px; padding-block: 14px; border-block: 1px solid var(--line); }
@media (min-width: 672px) { .brand-band__since { gap: 16px; padding-block: 20px; } }
.brand-band__since strong { font-weight: 300; font-size: 2.25rem; line-height: 1; color: #1f7a4d; }
@media (min-width: 672px) { .brand-band__since strong { font-size: 3rem; } }
.brand-band__since span { font-size: 14.5px; color: var(--ink-2); }
.legal { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* Compañía */
.company { display: grid; gap: 24px; }
@media (min-width: 672px) { .company { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.company__col { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 1px solid var(--line-strong); }
@media (min-width: 672px) { .company__col { gap: 14px; padding-top: 24px; } }
.company__col h3 { font-size: 1.125rem; font-weight: 400; }
@media (min-width: 672px) { .company__col h3 { font-size: 1.25rem; } }
.company__col p { color: var(--muted); font-size: 15px; }
.company__col ul { display: grid; margin-top: 2px; }
.company__col .link { min-height: 44px; }
@media (min-width: 1056px) { .company__col .link { min-height: 36px; } }

/* 13. Formulario de cotización ---------------------------------------------- */
.quote { display: grid; gap: 28px; }
@media (min-width: 672px) { .quote { gap: 48px; } }
@media (min-width: 1056px) { .quote { grid-template-columns: 5fr 7fr; gap: 64px; } }
.quote__aside { display: grid; gap: 16px; align-content: start; }
@media (min-width: 672px) { .quote__aside { gap: 24px; } }
@media (min-width: 1056px) { .quote__aside { position: sticky; top: calc(var(--header-h) + 32px); } }
.promises { display: grid; gap: 10px; }
.promises li { display: flex; gap: 10px; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.promises svg { width: 16px; height: 16px; color: var(--blue); margin-top: 2px; }
.promises strong { font-weight: 600; color: var(--ink); }
.contact-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 4px; }
.contact-list a { background: #fff; display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; font-size: 15px; transition: background-color 110ms; }
@media (min-width: 672px) { .contact-list a { padding: 16px 18px; } }
.contact-list a:hover { background: var(--blue-50); }
.contact-list svg { width: 20px; height: 20px; color: var(--blue); flex: none; margin-top: 1px; }
.contact-list small { display: block; font-size: 13px; color: var(--muted); }
@media (max-width: 671px) {
  /* En móvil el formulario va antes que los datos de contacto */
  .quote { gap: 16px; }
  .quote > .quote__aside { display: contents; }
  .quote > .quote__main { order: 1; margin-top: 8px; }
  .quote .contact-list { order: 2; margin-top: 12px; }
}

.form { background: #fff; border: 1px solid var(--line); padding: 20px 16px 24px; display: grid; gap: 20px; }
@media (min-width: 672px) { .form { padding: 40px; gap: 24px; } }
.form__row { display: grid; gap: 20px; }
@media (min-width: 672px) { .form__row { grid-template-columns: 1fr 1fr; gap: 24px; } }
.field { display: grid; gap: 8px; min-width: 0; }
.field label, .field legend { font-size: 13.5px; color: var(--ink-2); letter-spacing: 0.01em; }
.field .optional { color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; background: var(--bg-alt); border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; font-size: 16px; line-height: 1.4; transition: border-color 110ms, background-color 110ms; appearance: none; -webkit-appearance: none; }
.field textarea { min-height: 112px; resize: vertical; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 11 3 6l.7-.7L8 9.6l4.3-4.3L13 6z' fill='%23141821'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 40px; }
.field input::placeholder, .field textarea::placeholder { color: #7b8190; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--blue); outline-offset: -2px; background: #fff; }
.field .hint { font-size: 12.5px; color: var(--muted); }
.error { font-size: 13px; color: var(--danger); display: none; }
.field.is-invalid .error, .error--consent.is-visible { display: block; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { outline: 2px solid var(--danger); outline-offset: -2px; }
fieldset.field { border: 0; padding: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: 8px; }
.field--motivo { padding-bottom: 20px !important; border-bottom: 1px solid var(--line) !important; }
@media (min-width: 672px) { .field--motivo { padding-bottom: 24px !important; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--grid { display: grid; grid-template-columns: 1fr 1fr; }
@media (min-width: 672px) { .chips--grid { display: flex; } }
.chip { position: relative; display: flex; min-width: 0; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-strong); font-size: 14.5px; line-height: 1.25; text-align: center; background: #fff; transition: background-color 110ms, border-color 110ms, color 110ms; }
@media (min-width: 672px) { .chip span { width: auto; padding: 8px 16px; } }
.chip input:hover + span { border-color: var(--blue); }
.chip input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.field.is-invalid .chip span { border-color: var(--danger); }

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blue); flex: none; }
.consent.is-invalid { color: var(--danger); }
.error--consent { margin-top: -12px; padding-left: 32px; }

.form__alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--danger-bg); border-left: 3px solid var(--danger); color: #8f1a20; font-size: 14.5px; }
.form__alert svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.form__submit { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; }
.form__submit p { font-size: 13px; color: var(--muted); }
@media (max-width: 479px) { .form__submit .btn { width: 100%; } }

.form-success { display: grid; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--teal); padding: 24px 16px 28px; gap: 16px; }
@media (min-width: 672px) { .form-success { padding: 40px; gap: 20px; } }
.form-success:focus { outline: none; }
.form-success__title { font-weight: 300; font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); line-height: 1.2; }
.form-success .eyebrow span { color: var(--ink); }
.next-steps { counter-reset: ns; display: grid; gap: 14px; }
.next-steps li { counter-increment: ns; display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; font-size: 15px; color: var(--ink-2); }
.next-steps li p { padding-top: 3px; overflow-wrap: anywhere; }
.next-steps li::before { content: counter(ns); width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line-strong); font-family: var(--mono); font-size: 12px; color: var(--blue); }
.next-steps strong { font-weight: 600; color: var(--ink); }
.next-steps .link { font-size: inherit; display: inline; }
.next-steps a[href^="tel:"] { white-space: nowrap; }

/* 14. Modal ----------------------------------------------------------------- */
.modal { padding: 0; border: 0; width: calc(100% - 32px); max-width: 520px; max-height: calc(100dvh - 48px); background: #fff; color: var(--ink); box-shadow: 0 24px 64px -24px rgba(10, 18, 36, 0.6); overflow: auto; overscroll-behavior: contain; }
.modal::backdrop { background: rgba(10, 18, 36, 0.62); }
.modal[open] { animation: modal-in 200ms var(--ease); }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.modal__box { position: relative; padding: 28px 20px calc(24px + var(--safe-b)); border-top: 3px solid var(--teal); }
@media (min-width: 672px) { .modal__box { padding: 40px 40px 36px; } }
.modal__close { position: absolute; top: 6px; right: 6px; }
.modal__view { display: grid; gap: 12px; }
.modal__title { font-weight: 300; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); line-height: 1.2; padding-right: 40px; }
.modal__title:focus { outline: none; }
.modal__lead { font-size: 15px; color: var(--ink-2); }
.modal__form { display: grid; gap: 16px; margin-top: 8px; }
.modal__submit { width: 100%; }
.modal__legal { font-size: 12.5px; color: var(--muted); }
@media (max-width: 671px) {
  .modal { width: 100%; max-width: none; margin: auto 0 0; max-height: 92dvh; }
  .modal[open] { animation: sheet-in 240ms var(--ease); }
}
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Impresión ---------------------------------------------------------------- */
@media print {
  .header, .drawer, .actionbar, .wa, .modal, .ticker__pager, .rail__controls { display: none !important; }
  body { padding: 0 !important; }
}