/* Tiendas online Valencia — built by build.py, do not edit; edit src/css/*.css */
/* ---- 00-tokens.css ---- */
/* ============================================================
   Tiendas online Valencia — design tokens
   Every value below was measured from the rendered original
   (S/spec/<W>/spec.json computed styles), not guessed.
   Font: Poppins 400/500/600/800.

   Section stylesheets MUST take shared colours, radii, shadows and the
   type scale from here. Section-local custom properties are welcome
   (`.lp-hero{--lp-hero-card-w:…}`); redefining these globally is not.
   ============================================================ */
:root {
  /* ---------- Surfaces ---------- */
  --lp-bg:            #e6f4f5;   /* page background            rgb(230,244,245) */
  --lp-bg-soft:       #eef7f8;   /* header plate / light pill  rgb(238,247,248) */
  --lp-bg-dark:       #0e3a44;   /* garantías + CTA records    rgb(14,58,68) */
  --lp-bg-intro:      #2f7f8d;   /* "Cómo trabajamos" band     rgb(47,127,141) */
  --lp-white:         #ffffff;
  --lp-white-60:      rgba(255,255,255,.6);
  --lp-ice:           #ecfcfe;   /* card fills                 rgb(236,252,254) */
  --lp-ice-2:         #e9fbfd;   /*                            rgb(233,251,253) */
  --lp-ice-3:         #daf9fd;   /* light button fill (menu)   rgb(218,249,253) */
  --lp-sky:           #c7ecff;   /*                            rgb(199,236,255) */
  --lp-mint-50:       #cdeef1;   /*                            rgb(205,238,241) */
  --lp-mint-100:      #bfe8ea;   /*                            rgb(191,232,234) */
  --lp-aqua:          #71d1de;   /* accent pills               rgb(113,209,222) */
  --lp-aqua-2:        #7fd6dc;   /* brand turquoise            rgb(127,214,220) */
  --lp-aqua-3:        #b2eff7;   /*                            rgb(178,239,247) */
  --lp-hairline:      #e7f3f4;   /* 1px border on light pills  rgb(231,243,244) */

  /* ---------- Brand teal scale ---------- */
  --lp-teal-900:      #032e34;   /* darkest heading ink        rgb(3,46,52) */
  --lp-teal-700:      #0c5b63;   /* button hover               rgb(12,91,99) */
  --lp-teal-600:      #147d87;   /* primary button / link      rgb(20,125,135) */
  --lp-teal-500:      #1f9aa6;   /* form submit / eyebrow      rgb(31,154,166) */
  --lp-teal-text:     #33565e;   /*                            rgb(51,86,94) */
  --lp-gradient-teal: linear-gradient(135deg, #1f9aa6, #0c5b63);
  --lp-gradient-dark: linear-gradient(#cfeff5 0%, #06222a 100%);

  /* ---------- Violet accent (timeline / hero badge) ---------- */
  --lp-violet:        #7b5cf0;   /*                            rgb(123,92,240) */
  --lp-violet-dark:   #6543d2;   /*                            rgb(101,67,210) */
  --lp-violet-muted:  #83809b;   /* consent links in forms     rgb(131,128,155) */

  /* ---------- Text ---------- */
  --lp-text:          #0a2033;   /* body ink                   rgb(10,32,51) */
  --lp-text-muted:    #6a7682;   /* form labels & placeholders rgb(106,118,130) */
  --lp-text-faint:    #c1c0cd;   /* <select> placeholder       rgb(193,192,205) */
  --lp-text-on-dark:  #ffffff;
  --lp-text-on-dark-2:#eafafb;   /*                            rgb(234,250,251) */
  --lp-text-on-dark-3:#bfe8ea;

  /* ---------- Typography ----------
     Two heading families in the original:
       display — Poppins 500, letter-spacing ≈ -0.06em
                 (h1 hero + "Cuéntanos qué vendes", h2 tecnología + garantías)
       compact — Poppins 800, letter-spacing ≈ -0.02em
                 (h3 timeline years, "Trabajar con nosotros", CTA headline)
     Measured px per artboard: h1 70/53/50/31 · h2 50/46/40/26 · h3 38/34/30/28. */
  --lp-font:          'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --lp-h1:            70px;  --lp-h1-lh: 0.9;
  --lp-h2:            50px;  --lp-h2-lh: 0.9;
  --lp-h3:            38px;  --lp-h3-lh: 1;
  --lp-eyebrow-fs:    15px;  --lp-eyebrow-lh: 1.13;   /* 15/17 → 12/13 on phones */
  --lp-body:          16px;  --lp-body-lh: 1.42;      /* 16/22.72 — timeline copy */
  --lp-small:         14px;  --lp-small-lh: 1.4;      /* 14/19.6  — buttons, footer links */
  --lp-tiny:          12px;  --lp-tiny-lh: 1.2;       /* 12/14.4  — form labels */
  --lp-tracking-display: -0.06em;  /* -4.2px @70px, -3px @50px */
  --lp-tracking-tight:   -0.02em;  /* -1px @50px, -0.56px @28px */
  --lp-tracking-btn:     -0.04em;  /* -0.56px @14px, -0.5px @13px */

  /* ---------- Shape & depth ---------- */
  --lp-r-xs:       8px;   /* contact-form fields */
  --lp-r-input:    8px;   /* alias: compact form field */
  --lp-r-input-lg: 10px;  /* modal form field */
  --lp-r-sm:      13px;
  --lp-r-md:      20px;   /* popup container */
  --lp-r-lg:      22px;
  --lp-r-btn:     25px;   /* header CTA, CTA-section button */
  --lp-r-xl:      30px;   /* nav pills, menu buttons, modal submit */
  --lp-r-pill:    60px;   /* anything that must stay fully rounded */
  --lp-shadow-card: 0 18px 40px rgba(6,32,40,.18);
  --lp-shadow-deep: 0 12px 26px rgba(6,32,40,.32);

  /* ---------- Layout ---------- */
  --lp-container:   1200px;
  --lp-gutter:      20px;
  --lp-header-h:    92px;   /* record height per artboard; drives the anchor offset */
  --lp-header-h-m:  67px;

  /* ---------- Form control metrics (consumed by .lp-form in 01-base.css) ---------- */
  --lp-field-h:     48px;
  --lp-field-fs:    12px;
  --lp-field-lh:    1.33;
  --lp-field-px:    20px;
  --lp-field-r:     8px;
  --lp-field-pt:    10px;   /* textarea top padding (17px in the modals) */
  --lp-textarea-h:  72px;   /* 102px in the modals */
  --lp-field-gap-x: 18px;
  --lp-field-gap-y: 12px;

  /* ---------- Motion ---------- */
  --lp-ease: cubic-bezier(.2,.7,.2,1);
  --lp-dur:  .35s;
  --lp-dur-fast: .2s;   /* Tilda's own hover speed */
}

@media (max-width: 1199px) {
  :root { --lp-h1: 53px; --lp-h2: 46px; --lp-h3: 34px; --lp-header-h: 71px; }
}
@media (max-width: 959px) {
  :root { --lp-h1: 50px; --lp-h2: 40px; --lp-h3: 30px; --lp-header-h: 68px; }
}
@media (max-width: 639px) {
  :root {
    --lp-h1: 31px; --lp-h2: 26px; --lp-h3: 28px;
    --lp-eyebrow-fs: 12px; --lp-eyebrow-lh: 1.08;
    --lp-header-h: 64px;
  }
}
@media (max-width: 479px) {
  :root { --lp-header-h: 67px; }
}

/* ---- 01-base.css ---- */
/* ============================================================
   Base: reset, body, layout primitives, shared components.
   Owned by the foundation agent — section files must not redefine these
   selectors; override with a section-local class or custom property instead.

   Every component below is measured from the rendered original:
     .lp-btn      CTA rec733660530 · form submits rec2489483781 / rec726640609
     .lp-input …  contact form rec2489483781 (compact) · modals rec726640609 (large)

   Only what the built page actually uses lives here. Headings, eyebrows and a
   page container were tried and dropped: every section styles its own headline
   and its own width from the measured artboard, so those base classes never got
   applied. Do not re-add a rule here "for symmetry" — add it when a section uses it.
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  font-family: var(--lp-font);
  font-size: var(--lp-body);
  line-height: var(--lp-body-lh);
  color: var(--lp-text);
  background: var(--lp-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
ul, ol { padding: 0; list-style: none; }
input, textarea, select { font: inherit; }
:focus-visible { outline: 2px solid var(--lp-teal-500); outline-offset: 3px; }

/* Anchor targets clear the fixed header. Clicks are handled by 01-header.js
   (it subtracts the header height itself), but a page opened straight at
   /…#contacto — a shared link, a bookmark, the browser's back button — uses the
   browser's own fragment jump, which knows nothing about the header. */
[id="services"], [id="studio"], [id="software"], [id="guarantees"],
[id="why-here"], [id="process"], [id="projects"], [id="faq"], [id="contact"] {
  scroll-margin-top: calc(var(--lp-header-h) + 16px);
}

/* ---------- Layout ---------- */
.lp-section { position: relative; }

/* ---------- Buttons ----------
   Per-artboard geometry belongs to the section: set --lp-btn-h / --lp-btn-px /
   --lp-btn-fs / --lp-btn-r on the button (or an ancestor). */
.lp-btn {
  --lp-btn-h: 45px;
  --lp-btn-px: 24px;
  --lp-btn-fs: var(--lp-small);
  --lp-btn-r: var(--lp-r-xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--lp-btn-h);
  padding: 0 var(--lp-btn-px);
  border-radius: var(--lp-btn-r);
  font-size: var(--lp-btn-fs);
  font-weight: 500;
  line-height: var(--lp-small-lh);
  letter-spacing: var(--lp-tracking-btn);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--lp-dur-fast) ease-in-out,
    border-color var(--lp-dur-fast) ease-in-out,
    color var(--lp-dur-fast) ease-in-out,
    box-shadow var(--lp-dur-fast) ease-in-out;
}
.lp-btn--lower { text-transform: lowercase; }

/* teal fill — the three modal submits (hover #0c5b63) */
.lp-btn--primary { background: var(--lp-teal-600); color: var(--lp-white); }
.lp-btn--primary:hover,
.lp-btn--primary:focus-visible { background: var(--lp-teal-700); color: var(--lp-white); }

/* lighter teal fill — contact-form submit, cookie-bar «OK» */
.lp-btn--accent { background: var(--lp-teal-500); color: var(--lp-white); }
.lp-btn--accent:hover,
.lp-btn--accent:focus-visible { background: var(--lp-teal-700); color: var(--lp-white); }

/* white on dark — CTA section «pedir presupuesto» (hover #0c5b63 + white text) */
.lp-btn--white { background: var(--lp-white); color: var(--lp-teal-600); }
.lp-btn--white:hover,
.lp-btn--white:focus-visible { background: var(--lp-teal-700); color: var(--lp-white); }

.lp-btn[disabled], .lp-btn[aria-busy="true"] { opacity: .6; cursor: default; }

/* ============================================================
   Forms — shared primitives for 09-contact and 11-modals.
   Defaults reproduce the compact contact form (48px tall, 8px radius, 12px text).
   The modals use the large cut; set it on the <form>:
     .lp-modal .lp-form { --lp-field-h:60px; --lp-field-r:10px;
                          --lp-field-fs:16px; --lp-field-gap-y:25px;
                          --lp-field-pt:17px; --lp-textarea-h:102px; }
   Submission is handled globally by src/js/90-forms.js.
   ============================================================ */
.lp-form { display: flex; flex-direction: column; gap: var(--lp-field-gap-y); }

/* a row of side-by-side controls; children share the width equally */
.lp-form__row { display: flex; flex-wrap: wrap; gap: var(--lp-field-gap-y) var(--lp-field-gap-x); }
.lp-form__row > * { flex: 1 1 0; min-width: 0; }
.lp-form__field { display: flex; flex-direction: column; gap: 5px; }

/* group label ("Que necesitas?") */
.lp-form__label {
  font-size: var(--lp-field-fs);
  font-weight: 500;
  line-height: var(--lp-field-lh);
  color: var(--lp-text-muted);
  padding: 0 10px 5px 0;
}

.lp-input, .lp-select, .lp-textarea {
  display: block;
  width: 100%;
  min-height: var(--lp-field-h);
  padding: 0 var(--lp-field-px);
  border: 0;
  border-radius: var(--lp-field-r);
  background: var(--lp-white);
  color: var(--lp-text-muted);
  font-size: var(--lp-field-fs);
  font-weight: 500;
  line-height: var(--lp-field-lh);
  transition: box-shadow var(--lp-dur-fast) ease-in-out;
}
.lp-input::placeholder, .lp-textarea::placeholder { color: var(--lp-text-muted); opacity: 1; }
.lp-textarea {
  min-height: var(--lp-textarea-h);
  height: var(--lp-textarea-h);
  padding: var(--lp-field-pt) var(--lp-field-px) 0;
  resize: vertical;
}
.lp-select {
  padding-right: 45px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236a7682' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
}
.lp-select.is-placeholder { color: var(--lp-text-faint); }
.lp-input:focus, .lp-select:focus, .lp-textarea:focus { outline: 0; box-shadow: 0 0 0 2px var(--lp-teal-500); }
.lp-input.is-invalid, .lp-select.is-invalid, .lp-textarea.is-invalid { box-shadow: 0 0 0 2px #e05b5b; }

/* ---- the drop-down list itself -------------------------------------------
   A native <select>'s popup is drawn by the operating system and cannot be
   styled with ordinary CSS. The customizable-select model (`appearance:
   base-select`, Chrome/Edge 135+) hands the picker over to CSS, so we paint it
   in the site's own idiom: white sheet, card shadow, teal highlight. Browsers
   without it keep the native list — the field, its caret and the form logic are
   identical either way, so this is pure enhancement.
   The closed field is deliberately left alone: the UA caret (::picker-icon) is
   hidden and our painted one stays, which keeps every per-section size intact. */
@supports (appearance: base-select) {
  .lp-select,
  .lp-select::picker(select) { appearance: base-select; }

  .lp-select {
    display: flex;
    align-items: center;
    border: 0;
    text-align: left;
  }
  .lp-select::picker-icon { display: none; }
  .lp-select:open { box-shadow: 0 0 0 2px var(--lp-teal-500); }

  .lp-select::picker(select) {
    box-sizing: border-box;
    width: anchor-size(width);
    margin-block: 8px;                 /* the picker can flip above the field, so both sides */
    padding: 8px;
    border: 0;
    border-radius: var(--lp-r-md);
    background: var(--lp-white);
    box-shadow: var(--lp-shadow-card);
    font-family: var(--lp-font);
    opacity: 0;
    translate: 0 -6px;
    transition: opacity var(--lp-dur-fast) var(--lp-ease),
                translate var(--lp-dur-fast) var(--lp-ease),
                overlay var(--lp-dur-fast) allow-discrete,
                display var(--lp-dur-fast) allow-discrete;
  }
  .lp-select:open::picker(select) { opacity: 1; translate: 0 0; }
  @starting-style { .lp-select:open::picker(select) { opacity: 0; translate: 0 -6px; } }

  .lp-select option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 0;
    padding: 11px 14px;
    border-radius: var(--lp-r-sm);
    background: transparent;
    color: var(--lp-text);
    font-size: var(--lp-field-fs);
    font-weight: 500;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color var(--lp-dur-fast) ease-in-out,
                color var(--lp-dur-fast) ease-in-out;
  }
  .lp-select option:first-of-type { color: var(--lp-text-muted); }   /* the placeholder row */
  .lp-select option:hover,
  .lp-select option:focus {
    background: var(--lp-ice);
    color: var(--lp-teal-600);
    outline: 0;
  }
  .lp-select option:checked { color: var(--lp-teal-600); font-weight: 600; }
  .lp-select option::checkmark {
    order: 1;
    margin-left: auto;
    color: var(--lp-teal-500);
    content: '\2713';
  }
}

/* phone field: flag + «+34» prefix inside the same white box */
.lp-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--lp-field-h);
  padding: 0 var(--lp-field-px);
  border-radius: var(--lp-field-r);
  background: var(--lp-white);
  color: var(--lp-text-muted);
  font-size: var(--lp-field-fs);
  font-weight: 500;
  line-height: var(--lp-field-lh);
}
.lp-phone.is-invalid { box-shadow: 0 0 0 2px #e05b5b; }
.lp-phone__code  { flex: 0 0 auto; }
.lp-phone__input { flex: 1 1 auto; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.lp-phone__input:focus { outline: 0; }

/* checkbox: 24px square (20px in the modals), 1.67px teal border, .6 → 1 opacity */
.lp-checkbox {
  --lp-check-size: 24px;
  --lp-check-bw: 1.667px;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 2.8px;
  font-size: var(--lp-tiny);
  font-weight: 500;
  line-height: var(--lp-tiny-lh);
  color: var(--lp-text-muted);
  cursor: pointer;
}
.lp-checkbox input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.lp-checkbox__box {
  position: relative;
  flex: 0 0 auto;
  width: var(--lp-check-size);
  height: var(--lp-check-size);
  border: var(--lp-check-bw) solid var(--lp-teal-500);
  opacity: .6;
  transition: opacity .2s, box-shadow .2s;
}
.lp-checkbox__box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: none;
  width: 40%;
  height: 15%;
  border: solid var(--lp-text);
  border-width: 0 0 var(--lp-check-bw) var(--lp-check-bw);
  transform: translate(-50%, -70%) rotate(-45deg);
  transform-origin: center;
}
.lp-checkbox input:checked + .lp-checkbox__box { opacity: 1; }
.lp-checkbox input:checked + .lp-checkbox__box::after { display: block; }
.lp-checkbox input:focus-visible + .lp-checkbox__box { opacity: 1; box-shadow: 0 0 0 3px rgba(31,154,166,.45); }
.lp-checkbox.is-invalid .lp-checkbox__box { border-color: #e05b5b; opacity: 1; }
.lp-checkbox a { color: var(--lp-violet-muted); border-bottom: 1px solid currentColor; }

/* submit */
.lp-form__submit { display: flex; }
.lp-submit {
  --lp-btn-h: var(--lp-field-h);
  --lp-btn-px: 15px;
  --lp-btn-fs: var(--lp-tiny);
  --lp-btn-r: var(--lp-r-pill);
}

/* messages: hidden until 90-forms.js flips the state classes */
.lp-form__error { display: none; color: #c0392b; font-size: var(--lp-tiny); line-height: 1.4; }
.lp-form__error.is-visible { display: block; }
.lp-form__error ul { display: flex; flex-direction: column; gap: 4px; }
.lp-form__success { display: none; font-size: var(--lp-body); line-height: var(--lp-body-lh); color: var(--lp-teal-600); }
.lp-form.is-sent > :not(.lp-form__success) { display: none; }
.lp-form.is-sent .lp-form__success { display: block; }
.lp-form.is-sending { pointer-events: none; }

/* ---------- Utilities ---------- */
.lp-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;
}

/* ---------- Reduced motion ----------
   The only !important on the page: an a11y escape hatch that has to outrank
   every section's own transition/animation declarations. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- 01-header.css ---- */
/* ============================================================
   01 — Fixed header (white notched plate) + off-canvas menu.
   Port of rec703569831 (top bar), rec706398084 (sliding copy) and
   rec768917782 (t450 side menu).

   Sizing model: the original is a Tilda T396 artboard drawn on a 1200 grid
   and zoomed by viewport/1200 (capped here at the 1440 artboard). --lp-hk is
   that zoom expressed as a px unit, so every desktop measure is written as
   `calc(<grid px> * var(--lp-hk))` and matches the original 1:1 at 1440.
   From 960 to 1199 the original switches to its 960 artboard, so that band
   re-states the nav and the plate box in 960-grid units through --lp-hk9
   (= viewport/960), the same way the logo already resolves to 100 grid px there.
   Below 960 the plate is the three-piece mobile bar (bar-left + white bridge +
   bar-right); its geometry is derived from the plate height --lp-hplate,
   which follows the 320 grid (45/320 of the viewport) under 480 — exactly
   like the original — so the bar stays monolithic from 320 to 479.
   ============================================================ */

.lp-header {
  --lp-hk: min(1.2px, calc(100vw / 1200));   /* Tilda's artboard zoom, as a length */
  --lp-hplate: calc(66 * var(--lp-hk));      /* plate height */
  --lp-hplate2: calc(10 * var(--lp-hk));     /* y of the second (page-top) plate */
  --lp-hbr-w: calc(65 * var(--lp-hk));       /* white corner bracket: 65 x 137 grid px */
  --lp-hbr-h: calc(137 * var(--lp-hk));
  --lp-hbr-y: calc(12 * var(--lp-hk));       /* it rides with the page-top plate */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  pointer-events: none;                      /* only the controls are clickable */
  transform: translateY(0);
  transition: transform .2s cubic-bezier(0, 0, .8, 1);
}
/* Scrolling down hides the bar, scrolling up brings it back (see 01-header.js) */
.lp-header.is-hidden { transform: translateY(-140%); }
/* At the very top of the page the original stacks two identical bars 10 grid px
   apart (the static record under the sliding copy); away from the top only the
   flush one is left. The lower layer — and the corner brackets that belong to
   it — slide out of the plate box for that. */
.lp-header.is-stuck {
  --lp-hplate2: calc(-70 * var(--lp-hk));
  --lp-hbr-y: calc(-140 * var(--lp-hk));
}

.lp-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  width: min(calc(100% - 40 * var(--lp-hk)), 1392px);
  height: var(--lp-hplate);
  margin: 0 auto;
  padding: 0 calc(12 * var(--lp-hk)) 0 calc(30 * var(--lp-hk));
}
/* The white plate with the notch, plus the two corner brackets that tie its
   rounded ends into the hero card below (originals HI1.svg / HI2.svg — a
   rounded head the height of the plate with a 12-grid-px stem hanging down to
   meet the hero's white bars). The box reaches past the plate so the stems are
   not clipped; everything but the brackets and the plates is transparent. */
.lp-header__inner::before {
  content: "";
  position: absolute;
  inset: 0 0 calc(-90 * var(--lp-hk));
  z-index: -1;
  background:
    url(../assets/header/bar-corner-left.svg) no-repeat 0 var(--lp-hbr-y) / var(--lp-hbr-w) var(--lp-hbr-h),
    url(../assets/header/bar-corner-right.svg) no-repeat 100% var(--lp-hbr-y) / var(--lp-hbr-w) var(--lp-hbr-h),
    url(../assets/header/bar-desktop-top.svg) no-repeat 0 var(--lp-hplate2) / 100% var(--lp-hplate),
    url(../assets/header/bar-desktop-stuck.svg) no-repeat 0 0 / 100% var(--lp-hplate);
  transition: background-position .2s cubic-bezier(0, 0, .8, 1);
}

.lp-header__logo {
  flex: none;
  pointer-events: auto;
}
.lp-header__logo img {
  width: calc(125 * var(--lp-hk));
  height: auto;
}

.lp-header__nav { flex: none; margin-left: calc(17 * var(--lp-hk)); margin-right: auto; }
.lp-header__list {
  display: flex;
  align-items: center;
  padding: calc(3 * var(--lp-hk)) calc(6 * var(--lp-hk));
  border: 1px solid #e7f3f4;
  border-radius: calc(25 * var(--lp-hk));
  background: var(--lp-bg-soft);
}
.lp-header__link,
.lp-header__contact {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(34 * var(--lp-hk));
  padding: 0 calc(16.6 * var(--lp-hk));
  border-radius: calc(30 * var(--lp-hk));
  font-size: calc(14 * var(--lp-hk));
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.04em;
  text-transform: lowercase;
  white-space: nowrap;
  color: var(--lp-teal-600);
  pointer-events: auto;
  transition: background-color .2s ease-in-out, color .2s ease-in-out;
}
.lp-header__link:hover,
.lp-header__link:focus-visible,
.lp-header__contact:hover,
.lp-header__contact:focus-visible { background: var(--lp-teal-500); color: var(--lp-white); }

.lp-header__contact {
  flex: none;
  height: calc(42 * var(--lp-hk));
  min-width: calc(108 * var(--lp-hk));
  padding: 0 calc(20 * var(--lp-hk));
  background: var(--lp-bg-soft);
}

.lp-header__cta {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: calc(42 * var(--lp-hk));
  min-width: calc(158 * var(--lp-hk));
  margin-left: calc(7 * var(--lp-hk));
  padding: 0 calc(16 * var(--lp-hk));
  border-radius: calc(25 * var(--lp-hk));
  font-size: calc(14 * var(--lp-hk));
  font-weight: 500;
  line-height: 2;
  letter-spacing: -.04em;
  text-transform: lowercase;   /* as in the sliding copy of the original bar */
  white-space: nowrap;
  color: var(--lp-white);
  background: var(--lp-teal-600);
  pointer-events: auto;
  transition: background-color .2s ease-in-out;
}
.lp-header__cta:hover,
.lp-header__cta:focus-visible { background: var(--lp-teal-700); }

.lp-header__burger { display: none; }

/* ============================================================
   960 artboard — viewport 960…1199. Tilda redraws the bar here on a 960 grid
   (plate 51.5, nav pill 332 x 32, 10 px labels, brackets 42 x 90 at x 10/908),
   which is NOT the 1200 grid rescaled — the labels are proportionally smaller.
   --lp-hk9 is that artboard's zoom; every measure below is 960-grid px.
   ============================================================ */
@media (max-width: 1199px) {
  .lp-header {
    --lp-hk9: calc(100vw / 960);
    --lp-hplate: calc(51.5 * var(--lp-hk9));
    --lp-hplate2: calc(10.5 * var(--lp-hk9));
    --lp-hbr-w: calc(42 * var(--lp-hk9));
    --lp-hbr-h: calc(90 * var(--lp-hk9));
    --lp-hbr-y: calc(20 * var(--lp-hk9));
  }
  .lp-header.is-stuck {
    --lp-hplate2: calc(-56 * var(--lp-hk9));
    --lp-hbr-y: calc(-95 * var(--lp-hk9));
  }
  .lp-header__inner {
    width: calc(100% - 20 * var(--lp-hk9));
    padding: 0 calc(9.9 * var(--lp-hk9)) 0 calc(30 * var(--lp-hk9));
  }
  .lp-header__inner::before { inset: 0 0 calc(-70 * var(--lp-hk9)); }

  .lp-header__logo img { width: calc(100 * var(--lp-hk9)); }

  .lp-header__nav { margin-left: calc(14.9 * var(--lp-hk9)); }
  .lp-header__list {
    padding: calc(2.1 * var(--lp-hk9)) calc(4.1 * var(--lp-hk9));
    border-radius: calc(25 * var(--lp-hk9));
  }
  /* The burger is hidden from 960 up, so this bar IS the navigation on every
     landscape tablet. The 960 artboard would draw the labels at a literal 10 px
     (and 26 px pills) at the low end of the band, which is neither legible nor
     tappable, so the type and the pill heights stop shrinking at their 1199
     values — the max() only bites below ~1200 and leaves the 1199/1200 seam
     continuous (13 px vs 12.5 px, 34 px vs 32.5 px, 40 px vs 40 px). */
  .lp-header__link,
  .lp-header__contact {
    height: max(34px, calc(26 * var(--lp-hk9)));
    padding: 0 max(12px, calc(11.75 * var(--lp-hk9)));
    border-radius: calc(30 * var(--lp-hk9));
    font-size: max(13px, calc(10 * var(--lp-hk9)));
  }
  .lp-header__contact {
    height: max(40px, calc(32 * var(--lp-hk9)));
    min-width: calc(78 * var(--lp-hk9));
    padding: 0 max(16px, calc(16 * var(--lp-hk9)));
  }
  .lp-header__cta {
    height: max(40px, calc(32 * var(--lp-hk9)));
    min-width: calc(112 * var(--lp-hk9));
    margin-left: calc(4 * var(--lp-hk9));
    padding: 0 max(13px, calc(13 * var(--lp-hk9)));
    border-radius: calc(25 * var(--lp-hk9));
    font-size: max(13px, calc(10 * var(--lp-hk9)));
  }
}

/* ---------- tablet / mobile bar: bar-left + white bridge + bar-right ---------- */
@media (max-width: 959px) {
  .lp-header {
    --lp-hplate: 60px;
    padding-bottom: calc(.089 * var(--lp-hplate));
  }
  .lp-header__inner {
    width: 100%;
    max-width: none;
    padding: 0 calc(.2667 * var(--lp-hplate));
  }
  .lp-header__inner::before {
    inset: 0;
    transition: none;
    background:
      url(../assets/header/bar-mobile-left.svg) no-repeat left top / auto 100%,
      url(../assets/header/bar-mobile-right.svg) no-repeat right top / auto 100%,
      linear-gradient(var(--lp-white), var(--lp-white)) no-repeat calc(2.5 * var(--lp-hplate)) 0 / calc(100% - 3.8 * var(--lp-hplate)) calc(.2223 * var(--lp-hplate));
  }
  .lp-header__logo { margin-right: auto; }
  .lp-header__logo img { width: auto; height: calc(.607 * var(--lp-hplate)); }
  .lp-header__nav,
  .lp-header__contact { display: none; }
  .lp-header__cta {
    height: calc(.75 * var(--lp-hplate));
    min-width: 0;
    margin-left: 0;
    padding: 0 20px;
    border-radius: 30px;
    font-size: 13px;
    letter-spacing: 0;
  }
  .lp-header__burger {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: calc(.9 * var(--lp-hplate));
    height: calc(.9 * var(--lp-hplate));
    margin-right: calc(-.1722 * var(--lp-hplate));
    pointer-events: auto;
  }
  .lp-header__burger img { width: calc(.5556 * var(--lp-hplate)); height: auto; }
}

@media (max-width: 479px) {
  .lp-header { --lp-hplate: 14.0625vw; }   /* 45 of the 320 grid */
  .lp-header__cta { display: none; }
}

/* ============================================================
   Off-canvas menu (t450): 260px panel + tinted overlay

   z-index budget on this page: header bar 900 < cookie bar 1500 <
   menu overlay 1600 / panel 1601 < modal dialogs 2000. The panel has to
   cover the cookie bar (as the original t450 overlay does at z 99999),
   otherwise the bar hides and blocks the menu's «Pedir presupuesto» CTA;
   modals still open on top of the panel, which is where the CTA leads.
   ============================================================ */
html.lp-menu-open { overflow: hidden; }

.lp-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1600;
  background: #37cbdf;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease-in-out;
}
.lp-menu-overlay.is-open { opacity: .4; pointer-events: auto; }

.lp-menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1601;
  display: flex;
  flex-direction: column;
  width: 260px;
  max-width: 100%;
  height: 100%;
  padding: 48px 40px 38px;
  overflow-y: auto;
  background: var(--lp-bg);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .3s ease-in-out, visibility 0s linear .3s;
}
.lp-menu.is-open { transform: translateX(0); visibility: visible; transition: transform .3s ease-in-out, visibility 0s; }

.lp-menu__close {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 40px;
  height: 40px;
}
.lp-menu__close::before,
.lp-menu__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 2px;
  margin: -1px 0 0 -12px;
  background: var(--lp-teal-600);
}
.lp-menu__close::before { transform: rotate(45deg); }
.lp-menu__close::after { transform: rotate(-45deg); }

.lp-menu__logo { flex: none; }
.lp-menu__logo img { width: 120px; height: auto; }

.lp-menu__list { margin-top: 16px; }
/* This is the only navigation below 960, so every entry has to be a real touch
   target: the original's 25px line + 15px gap is re-cut as a 44px row with the
   gap living INSIDE the target (40px pitch -> 44px, so the panel rhythm barely
   moves and the 16px type is untouched). The submenu still opens 15px below its
   parent entry and the next entry follows the submenu flush, as in the original.
   The «servicios» toggle is a <button>, which does not stretch on its own —
   width:100% gives it the same full-width target as the links. */
.lp-menu__link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
  text-align: left;
  text-transform: lowercase;
  color: var(--lp-teal-600);
}
.lp-menu__link:focus-visible { color: var(--lp-teal-500); }

.lp-menu__caret {
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top-color: currentColor;
  border-bottom: 0;
}
/* The original arrow is static (computed transform "none" open and closed) —
   the open state is carried by aria-expanded alone. */

/* Sub-links sit on the panel background, flush with their parent entry, and
   the group is closed by a hairline (original: list 322.4 + 10 pad + 1 rule). */
.lp-menu__sub {
  display: flex;
  flex-direction: column;
  margin: 15px 0 0;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(0, 0, 0, .15);
  font-size: 16px;
  line-height: 21.6px;
}
.lp-menu__sub[hidden] { display: none; }
/* Same trade as the entries above: the original's 16px gap moves inside a 44px
   row, so the sub-links keep their 37.6px pitch look but gain a real target. */
.lp-menu__sublink {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 800;
  color: var(--lp-teal-600);
}
.lp-menu__sublink:focus-visible { color: var(--lp-teal-500); }

.lp-menu__bottom { display: flex; flex-direction: column; align-items: flex-start; margin-top: auto; padding-top: 30px; }
/* 30px icons in 40px hit boxes; the row is pulled 5px left so the icons still
   line up with the text column above them. */
.lp-menu__social { display: flex; align-items: center; height: 40px; margin-left: -5px; }
.lp-menu__social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.lp-menu__social-icon { width: 30px; height: 30px; transition: opacity .2s ease-in-out; }
.lp-menu__social a:focus-visible .lp-menu__social-icon { opacity: .75; }

.lp-menu__phone,
.lp-menu__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  padding: 0 24px;
  border-radius: 30px;
  font-size: var(--lp-small);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  transition: background-color .2s ease-in-out, color .2s ease-in-out;
}
.lp-menu__phone {
  margin-top: 25px;
  border: 1px solid #e7f3f4;
  color: var(--lp-teal-600);
  background: var(--lp-ice-3);
}
.lp-menu__phone:focus-visible { background: var(--lp-white); }
.lp-menu__cta {
  margin-top: 10px;
  color: var(--lp-white);
  background: var(--lp-teal-500);
}
.lp-menu__cta:focus-visible { background: var(--lp-teal-600); }

@media (max-width: 639px) {
  .lp-menu { padding: 42px 25px 25px; }
  .lp-menu__phone, .lp-menu__cta { height: 50px; }
}

/* ---- 02-hero.css ---- */
/* ============================================================
   02 — Hero (original record rec732542594)

   The original is a Tilda "zero block": an artboard of a fixed grid width
   (1200 / 960 / 640 / 320) whose contents are absolutely positioned and whose
   whole box is then scaled to the viewport. We keep that model because the
   hero is one decorative composition: `--lp-hero-u` is one artboard unit, every box is
   expressed in artboard units, and the composition scales with the viewport
   exactly like the original. Growth stops at 1440px (`.lp-hero__inner` caps the
   container), where the page-background colour takes over on both sides.
   ============================================================ */

.lp-hero {
  position: relative;
  background: var(--lp-bg);
  overflow: hidden;                 /* the gradient band is 3000 units tall: it is the page
                                       background of the sections below in the original */
}

.lp-hero__inner {
  container-type: inline-size;
  max-width: 1440px;
  margin: 0 auto;
}

.lp-hero__stage {
  --lp-hero-u: calc(100cqw / 1200);         /* one artboard unit */
  position: relative;
  height: calc(777 * var(--lp-hero-u));
}

/* every child is an artboard box: --x/--y/--w/--h in artboard units */
.lp-hero__stage > * {
  position: absolute;
  left: calc(var(--x) * var(--lp-hero-u));
  top: calc(var(--y) * var(--lp-hero-u));
  width: calc(var(--w) * var(--lp-hero-u));
  height: calc(var(--h) * var(--lp-hero-u));
  margin: 0;
}

/* ---- teal gradient band (bottom edge of the hero) ---- */
.lp-hero__band {
  --x: 0; --y: 656; --w: 1200; --h: 3000;
  border-radius: calc(17 * var(--lp-hero-u));
  background-image:
    url(../assets/hero/band-texture.svg),
    linear-gradient(0.5turn, #32d0e5 0%, #0c7e8d 18%, #032e34 48%, #20727d 66%, #3ec6d8 100%, rgba(255, 247, 5, 0) 100%);
  background-size: cover, cover;
  background-position: 50% 50%, 50% 50%;
  background-repeat: no-repeat, no-repeat;
}

/* ---- main rounded card (teal → white "cloud" artwork) ---- */
.lp-hero__backdrop {
  --x: 20; --y: 20; --w: 1148; --h: 646;
  border-radius: calc(25 * var(--lp-hero-u));
  background: url(../assets/hero/backdrop.svg) 50% 50% / cover no-repeat;
}

/* ---- flat decorative rectangles ---- */
.lp-hero__strip { background: var(--lp-ice-2); }
.lp-hero__strip--right { --x: 1174; --y: 0; --w: 26; --h: 656; }
.lp-hero__strip--top   { --x: 0; --y: 0; --w: 1200; --h: 19; }

.lp-hero__bar { background: var(--lp-white); }
.lp-hero__bar--left  { --x: 20;   --y: 112; --w: 12; --h: 100; }
.lp-hero__bar--right { --x: 1168; --y: 132; --w: 12; --h: 100; }

/* ---- soft frames behind the two screenshots ---- */
.lp-hero__frame {
  border-radius: calc(20 * var(--lp-hero-u));
  -webkit-backdrop-filter: blur(calc(20 * var(--lp-hero-u)));
  backdrop-filter: blur(calc(20 * var(--lp-hero-u)));
}
/* the sky tint must sit on its own layer: with `opacity` on the blurring box
   the blurred backdrop would be composited back at 20 % */
.lp-hero__frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--lp-sky);
  opacity: .2;
}
.lp-hero__frame--a { --x: 736; --y: 145; --w: 363; --h: 211; }
.lp-hero__frame--b { --x: 657; --y: 418; --w: 259; --h: 152; }

/* ---- screenshots ---- */
.lp-hero__shot { overflow: visible; }
.lp-hero__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(15 * var(--lp-hero-u));
}
.lp-hero__shot--a { --x: 746; --y: 155; --w: 343; --h: 191; }
.lp-hero__shot--b { --x: 667; --y: 428; --w: 239; --h: 132; }

/* ---- violet "Hecho realidad" badge ---- */
.lp-hero__badge {
  position: absolute;
  top: calc(-46 * var(--lp-hero-u));
  left: calc(-42 * var(--lp-hero-u));
  width: calc(112 * var(--lp-hero-u));
  height: calc(112 * var(--lp-hero-u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url(../assets/hero/badge-blob.svg) 50% 50% / contain no-repeat;
  transform: rotate(-9deg);
  font-weight: 800;
  font-size: calc(19 * var(--lp-hero-u));
  line-height: 1.02;
  letter-spacing: .01em;
  text-align: center;
  color: var(--lp-text-on-dark-2);
  filter: drop-shadow(0 calc(12 * var(--lp-hero-u)) calc(24 * var(--lp-hero-u)) rgba(6, 32, 40, .3));
  pointer-events: none;
}

/* ---- white "cloud" outlines ---- */
.lp-hero__cloud--desktop { --x: 20; --y: 200; --w: 1160; --h: 577; }
.lp-hero__cloud--mobile  { display: none; }

.lp-hero__corner { display: none; }

/* ---- store mock-up: a real screenshot inside the drawn phone ----

   Three layers stacked in the artboard box, all sized to it, so the whole
   mock-up scales with `--w` / `--h` at every breakpoint:
     1 store-phone-body.svg   body + drop shadow (screen painted flat dark, so
                                the mock-up still reads if the photo 404s)
     2 the screenshot         clipped to the screen rect
     3 store-phone-front.svg  notch + the violet cart bubble, which overlaps
                                the screen on purpose
   Both SVGs keep the artwork's `rotate(-6 130 169)`; the screenshot repeats it
   in CSS. The screen rect of the artwork is x 53 / y 33 / 154 × 272 in a
   260 × 340 viewBox, and its centre (130, 169) IS the artwork's rotation
   origin — so the default `transform-origin: 50% 50%` puts the two in
   register. Every offset below is a percentage of the box, never a pixel. */
.lp-hero__phone {
  --x: 930; --y: 372; --w: 250; --h: 326.9;
  z-index: 2;
}
.lp-hero__phone-body,
.lp-hero__phone-glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lp-hero__phone-screen {
  position: absolute;
  left: 20.3846%;                       /*  53 / 260 */
  top: 9.7059%;                         /*  33 / 340 */
  width: 59.2308%;                      /* 154 / 260 */
  height: 80%;                          /* 272 / 340 */
  border-radius: 14.2857% / 8.0882%;    /* the artwork's rx 22 on both axes */
  object-fit: cover;
  object-position: 50% 0;
  transform: rotate(-6deg);
}

/* ---- headline ---- */
.lp-hero__title {
  /* The plate behind the headline is narrower at the top than lower down, so the
     box is cut to that narrow part: the keyword line has to break before it runs
     off the white, where teal type on the teal gradient is unreadable. */
  --x: 50; --y: 307; --w: 400;
  z-index: 3;
  height: auto;
  font-weight: 500;
  font-size: calc(70 * var(--lp-hero-u));
  /* Русская сборка: шаг строк 0.86 от кегля, унаследованный от испанского
     макета, кириллице мал — выносные «р», «д», «у», «б» заходят на соседнюю
     строку, и на узких экранах это видно глазом. 0.96 разводит строки,
     оставаясь плотнее обычного текстового набора. */
  line-height: calc(67 * var(--lp-hero-u));
  letter-spacing: calc(-4.2 * var(--lp-hero-u));
}
.lp-hero__title-line { display: block; }
.lp-hero__title-line--teal { color: var(--lp-teal-600); }
.lp-hero__title-line--dark {
  color: var(--lp-text);
  width: calc(480 * var(--lp-hero-u));
  margin-left: calc(30 * var(--lp-hero-u));
  text-align: right;
}

/* ============================================================
   960 artboard — viewport 960…1199
   ============================================================ */
@media (max-width: 1199px) {
  .lp-hero__stage { --lp-hero-u: calc(100cqw / 960); height: calc(668 * var(--lp-hero-u)); }

  .lp-hero__band          { --y: 577; --w: 960; --h: 2275; }
  .lp-hero__backdrop      { --w: 925; --h: 557; }
  .lp-hero__strip--right  { --x: 950; --w: 10; --h: 577; }
  .lp-hero__strip--top    { --w: 960; }
  .lp-hero__bar--left     { --x: 10;  --y: 92; --w: 10; --h: 120; }
  .lp-hero__bar--right    { --x: 940; --y: 51; --w: 10; --h: 181; }
  .lp-hero__frame         { border-radius: calc(16 * var(--lp-hero-u)); }
  .lp-hero__frame--a      { --x: 590; --y: 116; --w: 290; --h: 169; }
  .lp-hero__frame--b      { --x: 525; --y: 335; --w: 207; --h: 152; }
  .lp-hero__shot img      { border-radius: calc(12 * var(--lp-hero-u)); }
  .lp-hero__shot--a       { --x: 598; --y: 124; --w: 274; --h: 153; }
  .lp-hero__shot--b       { --x: 533; --y: 343; --w: 191; --h: 136; }
  .lp-hero__cloud--desktop{ --x: 10; --w: 940; --h: 467.6; }
  .lp-hero__phone         { --x: 745; --y: 330; --w: 200; --h: 261.5; }

  /* --w must be re-stated on every artboard: it is read in artboard units, so the
     1200-grid value would be 769px of box here and the teal line would set as two
     lines that run off the white plate. 616 / 1200 × 960 = 492.8. */
  .lp-hero__title             { --x: 30; --y: 296; --w: 340; font-size: calc(53 * var(--lp-hero-u)); line-height: calc(51 * var(--lp-hero-u)); }
  .lp-hero__title-line--dark  { width: calc(400 * var(--lp-hero-u)); margin-left: calc(-26 * var(--lp-hero-u)); margin-top: calc(45 * var(--lp-hero-u)); }
}

/* ============================================================
   640 artboard — viewport 640…959
   ============================================================ */
@media (max-width: 959px) {
  .lp-hero__stage { --lp-hero-u: calc(100cqw / 640); height: calc(979 * var(--lp-hero-u)); }

  .lp-hero__band          { --y: 486; --w: 640; --h: 1895; }
  .lp-hero__backdrop      { --x: 5; --y: 10; --w: 630; --h: 872; }
  .lp-hero__strip--right  { display: none; }
  .lp-hero__strip--top    { display: none; }
  .lp-hero__bar--left     { --x: -3; --y: 0; --w: 10; --h: 212; }
  .lp-hero__bar--right    { display: none; }
  .lp-hero__frame--a      { --x: 57;  --y: 658; --w: 291; --h: 168; }
  .lp-hero__frame--b      { --x: 248; --y: 501; --w: 217; --h: 127; }
  .lp-hero__shot--a       { --x: 65;  --y: 666; --w: 275; --h: 152; }
  .lp-hero__shot--b       { --x: 256; --y: 509; --w: 201; --h: 111; }
  .lp-hero__cloud--desktop{ display: none; }
  .lp-hero__phone         { --x: 415; --y: 640; --w: 200; --h: 261.5; }

  .lp-hero__title             { --x: 20; --y: 219; --w: 341; font-size: calc(50 * var(--lp-hero-u)); line-height: calc(48 * var(--lp-hero-u)); letter-spacing: calc(-2 * var(--lp-hero-u)); }
  .lp-hero__title-line--dark  { width: calc(376 * var(--lp-hero-u)); margin-left: calc(-13 * var(--lp-hero-u)); margin-top: 0; }
  /* This is the one artboard where no white "cloud" artwork sits behind the
     headline — the 640 grid's cloud asset was destroyed in the export, and the
     placeholder slab the original paints instead made both the slab and the h1
     unreadable. Without it the first line would sit teal-on-teal, so it takes
     the brand turquoise the rest of the page uses for text on a teal ground
     (03-intro / 05-tech): 4.7:1 against the backdrop here. */
  .lp-hero__title-line--teal  { color: var(--lp-aqua-2); }
  /* The second line needs the same treatment and never got it: on the Spanish
     build it stays --lp-navy over the same teal ground, which measures 2.5:1 —
     under the 3:1 large-text floor. White reads 6.8:1 here and keeps the
     two-tone hierarchy (turquoise lead, white follow). */
  .lp-hero__title-line--dark  { color: var(--lp-text-on-dark); }
}

/* ============================================================
   320 artboard — viewport ≤ 639
   ============================================================ */
@media (max-width: 639px) {
  .lp-hero__stage { --lp-hero-u: calc(100cqw / 320); height: calc(804 * var(--lp-hero-u)); }

  .lp-hero__band          { --y: 718; --w: 320; --h: 1535; }
  .lp-hero__backdrop      { --w: 312; --h: 663; }
  .lp-hero__bar--left     { display: none; }
  .lp-hero__bar--right    { display: block; --x: 310; --y: 306; --w: 10; --h: 341; }
  .lp-hero__frame--a      { --x: 30; --y: 359; --w: 265; --h: 154; }
  .lp-hero__frame--b      { --x: 30; --y: 541; --w: 153; --h: 90; border-radius: calc(12 * var(--lp-hero-u)); }
  .lp-hero__shot--a       { --x: 37; --y: 367; --w: 250; --h: 138; }
  .lp-hero__shot--b       { --x: 35; --y: 547; --w: 142; --h: 78; }
  .lp-hero__shot--b img   { border-radius: calc(9 * var(--lp-hero-u)); }
  .lp-hero__cloud--mobile { display: block; --x: 0; --y: 80; --w: 320; --h: 665; }
  .lp-hero__corner        { display: block; --y: 0; --w: 50; --h: 327; }
  .lp-hero__corner--left  { --x: 0; }
  .lp-hero__corner--right { --x: 270; }
  .lp-hero__phone         { --x: 195; --y: 540; --w: 118; --h: 154.3; }

  .lp-hero__title             { --x: 20; --y: 139; --w: 208;  /* уже испанских 222: колонка
                              кончалась ровно на кромке белой подложки, и хвост «Русскоязычная»
                              задевал градиент. На 208 в слове срабатывает мягкий перенос. */ font-size: calc(31 * var(--lp-hero-u)); line-height: calc(30 * var(--lp-hero-u)); }
  .lp-hero__title-line--dark  { width: calc(242 * var(--lp-hero-u)); margin-left: 0; text-align: left; }
  .lp-hero__title-line--teal  { color: var(--lp-teal-600); }   /* the mobile cloud is back behind it */
  .lp-hero__title-line--dark  { color: var(--lp-text); }      /* …and so is the white slab: undo the
                                                                 white the 640 band needs, or the second
                                                                 line goes white-on-white here */
}

/* ============================================================
   640–959 — the headline needs a ground of its own
   ------------------------------------------------------------
   The 640 artboard's cloud asset was destroyed in the export, so here the h1
   sits straight on the hero gradient, which runs dark teal at the top to pale
   cyan at the bottom. Measured on the glyph pixels themselves (render twice,
   subtract, sample only the solid core), no single ink survives that range:
   ~27% of the pixels land under the 3:1 large-text floor whether the line is
   turquoise or white, because the ground changes underneath the text.

   So give the heading back a ground, which is what the missing asset did.
   `isolation: isolate` keeps the z-index:-1 layer inside the h1's own stacking
   context — without it the scrim would drop behind the hero art entirely.
   ============================================================ */
@media (min-width: 640px) and (max-width: 959px) {
  .lp-hero__title { position: relative; isolation: isolate; }
  .lp-hero__title::before {
    content: "";
    position: absolute;
    /* the fade has to finish OUTSIDE the glyphs, or the edge reads as a box:
       the box is pushed well past the text and only then allowed to go clear */
    inset: calc(-18 * var(--lp-hero-u)) calc(-34 * var(--lp-hero-u))
           calc(-22 * var(--lp-hero-u)) calc(-24 * var(--lp-hero-u));
    z-index: -1;
    border-radius: calc(30 * var(--lp-hero-u));
    background:
      radial-gradient(128% 108% at 32% 40%,
        rgba(3, 46, 52, .90) 0%,
        rgba(3, 46, 52, .88) 52%,
        rgba(3, 46, 52, .74) 78%,
        rgba(3, 46, 52, .22) 93%,
        rgba(3, 46, 52, 0)   100%);
  }
}

/* ---- 02b-includes.css ---- */
/* ============================================================
   02b — «qué incluye» panel: what the shop includes  (#incluye)
   The first content block after the hero, so it is built as a sibling of the
   «software» panel: same ice-gradient panel, same appendix tab cut from a
   mask, same two-tone display title, same per-artboard vw scaling.

   Two things are section-specific:
   1. The shelf. The tab's shoulder needs a darker ground to read against, and
      the hero above ends on a solid colour of its own (its gradient band is
      sliced at the artboard's bottom edge), so this section opens on a strip of
      exactly that colour — sampled per artboard off the rendered hero:
      #28bccf ≥960, #096470 at 640–959, #25b4c7 ≤639. The strip is capped at
      1440px and centred because .lp-hero__inner caps there too; past 1440 the
      hero shows the page background each side, and so does the shelf.
   2. The content is a list, not a card row: seven long items are too many for
      cards, so they run as a two-column balanced list (CSS multicol) with a
      check mark each. Below 960 it is one column — two columns there would push
      the measure under ~50 characters and this copy is long enough to need the
      room. Each item is a flex row that multicol may not split, so a check
      mark can never be separated from the copy it belongs to.

   Sizes are per-artboard vw values capped at what the band above computes at
   its own edge, so nothing jumps when the viewport crosses a breakpoint.
   Assets are private copies under assets/includes/ (a shared SVG must never be
   edited under its own name).
   ============================================================ */
.lp-inc {
  --lp-inc-shelf: min(96px, 6.67vw);   /* strip the tab's shoulder sits on */
  --lp-inc-shelf-bg: #28bccf;          /* the colour the hero's band is cut at */
  display: flow-root;
  padding: var(--lp-inc-shelf) 0 min(76px, 5.28vw);
  background-color: var(--lp-bg);
  background-image: linear-gradient(var(--lp-inc-shelf-bg) 0 100%);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: min(1440px, 100%) var(--lp-inc-shelf);
}

.lp-inc__panel {
  position: relative;
  /* 24px gutters up to the 1440 artboard, then the panel stops growing and
     centres — identical to the software panel, so the two share one x axis */
  max-width: min(1392px, 100% - 48px);
  margin: 0 auto;
  padding: 0 0 min(56px, 3.9vw);
  border-radius: 30px;
  background: linear-gradient(0deg, #c8f6fc 0%, #e7fbfe 75%);
}
.lp-inc__inner {
  display: flow-root;                  /* keeps the tab's compensation margin inside */
  position: relative;                  /* positioning box for the tab */
  width: 100%;
  max-width: min(1224px, 85vw);
  margin: 0 auto;
}

/* ---------- appendix tab ---------- */
.lp-inc__tab {
  --lp-inc-tab-w: clamp(150px, 19vw, 237px);
  position: absolute;
  left: 0;
  top: calc(var(--lp-inc-tab-w) * -44 / 237);
  z-index: 2;
  width: var(--lp-inc-tab-w);
  aspect-ratio: 237 / 110;
  background: #e7fbfe;                 /* the panel's own top colour */
  -webkit-mask: url(../assets/includes/tab-mask-includes.svg) center / 100% 100% no-repeat;
  mask: url(../assets/includes/tab-mask-includes.svg) center / 100% 100% no-repeat;
  pointer-events: none;
}
.lp-inc__tab-label {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 12%;
  text-align: center;
  font-size: min(18px, 1.25vw);
  font-weight: 500;
  line-height: 1.133;
  letter-spacing: -.04em;
  text-transform: lowercase;
  color: var(--lp-teal-600);           /* 4.5:1 on the panel's #e7fbfe top */
}

/* ---------- title ---------- */
.lp-inc__title {
  margin: min(96px, 6.7vw) 0 min(60px, 4.2vw);
  font-size: min(60px, 4.1667vw);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.06em;
  color: var(--lp-teal-600);
}
/* block, so the two-tone break always lands between the two halves */
.lp-inc__title-lead { display: block; color: var(--lp-teal-900); }

/* ---------- the list ---------- */
.lp-inc__list {
  columns: 2;
  column-gap: min(80px, 5.6vw);
}
/* The item carries the copy's own type metrics: the mark inherits them, so its
   vertical centring (`1.5em`, one line box) tracks the text at every width. */
.lp-inc__item {
  --lp-inc-mark: min(30px, 2.1vw);
  --lp-inc-mark-gap: min(18px, 1.25vw);
  break-inside: avoid;                 /* an item never splits across columns */
  display: flex;
  align-items: flex-start;
  gap: var(--lp-inc-mark-gap);
  margin: 0 0 min(30px, 2.1vw);
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.5;
}
.lp-inc__item:last-child { margin-bottom: 0; }

.lp-inc__mark {
  flex: 0 0 auto;
  margin-top: calc((1.5em - var(--lp-inc-mark)) / 2);   /* centred on the first line */
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--lp-inc-mark);
  height: var(--lp-inc-mark);
  border-radius: 50%;
  background: var(--lp-white);
  color: var(--lp-teal-500);
  box-shadow: 0 4px 10px rgba(6, 32, 40, .07);
}
.lp-inc__mark svg { width: 58%; height: auto; }

.lp-inc__text {
  min-width: 0;
  max-width: 33em;                     /* ≈ 60–65 characters in Poppins */
  margin: 0;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  letter-spacing: -.01em;
  color: var(--lp-teal-text);          /* 7:1 on the panel */
}

/* ---------- 960–1199 (Tilda 960 artboard) -------------------------------- */
@media (max-width: 1199px) {
  .lp-inc { --lp-inc-shelf: 6.67vw; }
  .lp-inc__panel { max-width: calc(100% - 24px); padding: 0 0 4.7vw; border-radius: 28px; }
  .lp-inc__inner { max-width: none; padding: 0 4.2%; }
  .lp-inc__tab { left: 4.2%; }
  .lp-inc__tab-label { font-size: min(15px, 1.5625vw); }
  .lp-inc__title {
    margin-top: 8vw;
    margin-bottom: 5vw;
    font-size: min(50px, 4.7917vw);
    letter-spacing: -.0653em;
  }
  .lp-inc__list { column-gap: min(66px, 4.7vw); }
  /* the copy stops scaling here and holds the value the base band reaches at
     1200 — a vw rule would run it down to 12px by the time the band ends,
     which is a caption size, not something a buyer reads seven of */
  .lp-inc__item {
    --lp-inc-mark: 25px;
    --lp-inc-mark-gap: 15px;
    margin-bottom: 25px;
    font-size: 15px;
  }
  .lp-inc__text { max-width: none; }
}

/* ---------- 640–959 (Tilda 640 artboard) --------------------------------- */
@media (max-width: 959px) {
  .lp-inc {
    --lp-inc-shelf: 6.67vw;
    --lp-inc-shelf-bg: #096470;        /* the hero's band is cut lower on this artboard */
    padding-bottom: 8.4vw;
  }
  .lp-inc__panel { max-width: none; margin: 0; padding: 0 0 8vw; border-radius: 2.5vw; }
  .lp-inc__inner { max-width: none; padding: 0 4.7%; }
  .lp-inc__tab { left: 4.7%; }
  .lp-inc__tab-label { font-size: 1.875vw; }
  .lp-inc__title {
    margin-top: 7.4vw;
    margin-bottom: 5.6vw;
    font-size: min(46px, 6.25vw);
    letter-spacing: -.025em;
  }
  /* one column: two would drop the measure under ~50 characters here */
  .lp-inc__list { columns: 1; }
  .lp-inc__item {
    --lp-inc-mark: 25px;
    --lp-inc-mark-gap: 15px;
    margin-bottom: min(24px, 3vw);
    font-size: 15px;
  }
  /* one column, so the measure is capped by hand: 33em keeps the longest line
     at ~66 characters instead of the ~75 the full panel width would give */
  .lp-inc__text { max-width: 33em; }
}

/* ---------- ≤639 (Tilda 320 artboard, zoomed) ---------------------------- */
@media (max-width: 639px) {
  /* the panel now covers nearly the whole width, so a protruding tab would have
     no ground to read against: the label goes back inside as plain text, the
     same move the software panel makes here */
  .lp-inc {
    padding: 12.5vw 0 9vw;
    background-color: #e7fbfe;
    background-image: none;
  }
  .lp-inc__panel { margin: 0 3.1%; padding: 3.75vw 0 12vw; border-radius: 5vw; }
  .lp-inc__inner { padding: 0 6.67%; }
  .lp-inc__tab {
    position: static;
    width: auto;
    aspect-ratio: auto;
    background: none;
    -webkit-mask: none;
    mask: none;
    padding-left: 3.75vw;
    margin: 0 0 9vw;
    font-size: 3.75vw;                 /* the block's own strut, or the line box grows */
    line-height: 1.083;
  }
  .lp-inc__tab-label {
    position: static;
    text-align: left;
    font-size: 3.75vw;
    line-height: 1.083;
  }
  .lp-inc__title-lead { display: inline; }   /* one narrow column: let it wrap freely */
  .lp-inc__title {
    margin-top: 0;
    margin-bottom: min(40px, 8vw);
    font-size: min(40px, 8.125vw);
    line-height: .95;
    letter-spacing: -.0385em;
  }
  .lp-inc__item {
    --lp-inc-mark: clamp(22px, 3.6vw, 24px);
    --lp-inc-mark-gap: clamp(12px, 3vw, 14px);
    margin-bottom: clamp(18px, 4.4vw, 20px);
    /* 14px is the floor: well clear of the 12px legibility minimum, because
       this is body copy a buyer actually reads, not a caption */
    font-size: clamp(14px, 3.4vw, 15px);
  }
  .lp-inc__text { max-width: none; }
}

/* ---- 03-intro.css ---- */
/* ============================================================
   03 — Intro band «El estudio» (#estudio) — lead-in to the history timeline
   Ported from the original custom .mw-intro block: 1200 grid,
   eyebrow column (150px) + body column at desktop, stacked ≤639.
   ============================================================ */
.lp-intro {
  --lp-intro-gut: clamp(20px, 5vw, 80px);   /* original's fluid side gutter; the 1200 box includes it (border-box) */
  --lp-intro-text: rgba(255, 255, 255, .82);
  position: relative;
  z-index: 20;                                     /* original stacks this band above the timeline that follows */
  background: var(--lp-bg-intro);
  color: var(--lp-white);
}
.lp-intro__inner {
  max-width: var(--lp-container);              /* 1200 incl. gutters, like the original .mw-intro box */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  column-gap: 44px;
  align-items: start;
  padding: 78px var(--lp-intro-gut) 24px;
}
.lp-intro__eyebrow {
  margin: 14px 0 0;
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 700;
  line-height: normal;
  letter-spacing: .01em;
  color: var(--lp-aqua-2);
}
.lp-intro__body {
  grid-column: 2;
  max-width: 920px;
}
.lp-intro__title {
  margin: 0 0 26px;
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--lp-white);
}
.lp-intro__text {
  max-width: 640px;
  margin: 0;
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--lp-intro-text);
}
@media (max-width: 639px) {
  .lp-intro__inner {
    grid-template-columns: 1fr;
    padding: 52px var(--lp-intro-gut) 60px;
  }
  .lp-intro__eyebrow { margin: 0 0 16px; }
  .lp-intro__body { grid-column: 1; max-width: none; }
}

/* ---- 04-timeline.css ---- */
/* ============================================================
   04 — Timeline «MoiseefWeb» (the #estudio anchor sits on the intro band above). Port of the custom mw-tl block.
   Desktop (≥960): the section is a tall "runway" whose height the driver
   sets inline; .lp-timeline__stage is sticky and 100vh high, the horizontal
   track is scrolled by the driver as the page scrolls. ≤959: vertical stack,
   the giant word rotated 90° behind the cards, reveal/parallax animations.
   ============================================================ */
.lp-timeline {
  --lp-tl-gut: clamp(20px, 4vw, 64px);
  position: relative;
  z-index: 20;
  padding: 0;
  overflow: clip;
  background: linear-gradient(180deg, var(--lp-bg-intro) 0%, #0b333d 100%);
}

/* Sticky stage (desktop) */
.lp-timeline__stage {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  /* Keeps the badges hanging under the cards clear of the section's own bottom
     edge (the section is overflow:clip). The stage is border-box, so this only
     shrinks the box the track is centred in — its 100vh height is unchanged.
     It used to reserve ~191px for the «tecnología» panel that lapped over this
     section; that panel is no longer part of the page. */
  padding: 0 0 40px;
}

/* Horizontal track, scrollbar hidden (driven by the page scroll) */
.lp-timeline__track {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lp-timeline__track::-webkit-scrollbar { display: none; }

/* No-JS fallback. The runway is driven by JS: without it the track would sit at
   scrollLeft 0 for ever, hiding 5 of the 9 milestones behind a scrollbar that is
   deliberately suppressed (and that macOS would render as a fading overlay even
   if it were not). So when the parse-time `lp-timeline--js` marker is missing we
   drop the horizontal scroller altogether — the stage stops being sticky, the
   track overflows nothing and the cards wrap into rows, so every milestone is
   reachable with the ordinary page scroll. (≤959 the stack rules below take over
   and already do this.) */
.lp-timeline:not(.lp-timeline--js) .lp-timeline__stage {
  position: static;
  min-height: 0;
}
.lp-timeline:not(.lp-timeline--js) .lp-timeline__track { overflow: visible; }
.lp-timeline:not(.lp-timeline--js) .lp-timeline__inner {
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  width: auto;
  /* row gap clears the badge that hangs ~84px under a card; the bottom padding
     also clears it plus the ~191px by which the next section is pulled up */
  gap: 110px 20px;
  padding: 120px var(--lp-tl-gut) 300px;
}
.lp-timeline:not(.lp-timeline--js) .lp-timeline__inner::after { display: none; }
.lp-timeline:not(.lp-timeline--js) .lp-tl-step { transform: none; }

.lp-timeline__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  padding: 250px var(--lp-tl-gut) 215px;
}
.lp-timeline__inner::after { content: ""; flex: 0 0 var(--lp-tl-gut); }

/* Giant gradient word behind the cards */
.lp-timeline__word {
  margin: 0;
  position: absolute;
  z-index: 0;
  left: var(--lp-tl-gut);
  top: 50%;
  margin: 0;
  transform: translate(0, -84%);
  white-space: nowrap;
  font-weight: 800;
  font-size: clamp(200px, 66vh, 470px);
  line-height: .82;
  letter-spacing: -.01em;
  background: var(--lp-gradient-dark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: .22;
  pointer-events: none;
}
.lp-timeline__word span { color: transparent; }

/* Cards */
.lp-tl-step {
  position: relative;
  z-index: 1;
  flex: 0 0 300px;
  min-height: 200px;
  padding: 26px 26px 30px;
  border-radius: var(--lp-r-lg);
  background: var(--lp-white);
  box-shadow: var(--lp-shadow-card);
  will-change: transform;
}
.lp-tl-step--accent { background: var(--lp-violet); }
.lp-tl-step--accent .lp-tl-step__year,
.lp-tl-step--accent .lp-tl-step__text { color: var(--lp-white); }
.lp-tl-step--accent-d { background: var(--lp-violet-dark); }
.lp-tl-step--accent-d .lp-tl-step__year,
.lp-tl-step--accent-d .lp-tl-step__text { color: var(--lp-white); }

.lp-tl-step__year {
  margin: 0 0 14px;
  font-weight: 800;
  font-size: 38px;
  line-height: 1;
  letter-spacing: normal;
  color: var(--lp-teal-600);
}
.lp-tl-step__text { margin: 0; font-size: 16px; line-height: 1.42; color: var(--lp-text); }

.lp-tl-step--intro { flex-basis: 340px; background: var(--lp-mint-100); }
.lp-tl-step--intro .lp-tl-step__year { color: var(--lp-text); }

/* Team cards: the card itself is transparent — its shape is painted by ::before
   and masked with a notch, so the avatars sit in the cut-out top-right corner. */
.lp-tl-step--team { background: transparent; box-shadow: none; overflow: visible; }
.lp-tl-step--team .lp-tl-step__year,
.lp-tl-step--team .lp-tl-step__text { position: relative; z-index: 1; }
.lp-tl-step--team::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--lp-r-lg);
  background: var(--lp-white);
  filter: drop-shadow(0 16px 32px rgba(6, 32, 40, .16));
  -webkit-mask: url(../assets/timeline/card-notch-mask.svg) 0 0 / 100% 100% no-repeat;
  mask: url(../assets/timeline/card-notch-mask.svg) 0 0 / 100% 100% no-repeat;
}
.lp-tl-step--intro.lp-tl-step--team::before { background: var(--lp-mint-100); }
.lp-tl-step--team.lp-tl-step--accent-d::before { background: var(--lp-violet-dark); }

/* Avatars in the notch */
.lp-tl-step__avatars { position: absolute; top: 10px; right: 20px; z-index: 2; display: flex; }
.lp-tl-step__avatar {
  display: block;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 26%;
  background: var(--lp-teal-700);
}
.lp-tl-step__avatar + .lp-tl-step__avatar { margin-left: -14px; }
/* artwork, not a portrait: it is already framed on its subject, so it is not
   pulled up the way a face is, and its own light ground shows in the disc */
.lp-tl-step__avatar--art { object-position: center; background: var(--lp-white); }

/* City marker (MSK / ALC / VLC) */
.lp-tl-step__marker {
  position: absolute;
  right: -16px;
  bottom: -12px;
  z-index: 4;
  width: 74px;
  height: 74px;
  pointer-events: none;
  transform: rotate(-14deg);
  filter: drop-shadow(0 8px 16px rgba(6, 32, 40, .28));
}

/* Hanging badge (swung by the driver) */
.lp-tl-step__hang {
  position: absolute;
  left: 58%;
  top: calc(100% - 6px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  transform-origin: top center;
  will-change: transform;
  pointer-events: none;
}
.lp-tl-hang__line { width: 2px; height: 34px; border-radius: 2px; background: var(--lp-white-60); }
.lp-tl-hang__lines { display: flex; justify-content: space-between; width: 66%; align-self: center; }
.lp-tl-hang__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--lp-gradient-teal);
  box-shadow: var(--lp-shadow-deep);
  transform: rotate(-6deg);
}
.lp-tl-hang__badge--text {
  width: auto;
  height: auto;
  padding: 9px 15px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  color: var(--lp-text-on-dark-2);
  white-space: nowrap;
  transform: rotate(-4deg);
}

/* ---- Ultra-wide: nothing to ride ----------------------------------------
   Past ~3100px the whole strip already fits inside the track, so the driver's
   scrollLeft never moves. It marks the section instead: the stage stops being a
   sticky 100vh runway (which otherwise left ~500px of empty teal under the
   cards) and collapses to the track's own height, keeping only the bottom
   padding that clears the next section's overlapping panel. `--lp-tl-center` is
   half the leftover width, measured by the driver; it moves the cards and the
   giant word by the same amount, so the composition sits centred like every
   neighbouring section instead of stranded flush left. */
/* The 470px word draws ~26px of cap above its own line box, so the collapsed
   stage keeps that much clearance (plus a little) at the top — without it the
   section's `overflow: clip` shaves the tops of the letters. */
.lp-timeline--static .lp-timeline__stage { position: static; min-height: 0; padding-top: 40px; }
.lp-timeline--static .lp-timeline__inner { margin-left: var(--lp-tl-center, 0px); }
.lp-timeline--static .lp-timeline__word { left: calc(var(--lp-tl-gut) + var(--lp-tl-center, 0px)); }

/* Vertical levels (desktop) */
.lp-tl-step--lvl-top { transform: translateY(-115px); }
.lp-tl-step--lvl-up  { transform: translateY(-50px); }
.lp-tl-step--lvl-mid { transform: translateY(-12px); }
.lp-tl-step--lvl-low { transform: translateY(10px); }

/* ---------- ≤959: vertical stack ---------- */
/* ---- 960…1199: the panel above laps over by 9.79vw, not 190.8px ---------- */
@media (max-width: 1199px) {
  .lp-timeline__stage { padding-bottom: 40px; }
}

@media (max-width: 959px) {
  .lp-timeline__stage { padding-bottom: 0; }   /* stacked here; the panel no longer laps over */
  .lp-timeline__stage { position: relative; display: block; min-height: 0; padding: 56px 0; }
  .lp-timeline__track { overflow: visible; }
  .lp-timeline__inner {
    flex-direction: column;
    align-items: stretch;
    width: auto;
    gap: 28px;
    padding: 24px var(--lp-tl-gut) 40px;
  }
  .lp-timeline__inner::after { display: none; }
  .lp-tl-step { flex: none; width: 100%; max-width: 560px; margin: 0 auto; transform: none; }
  /* the badge hangs 84px below the card — keep it off the next card */
  .lp-tl-step--hang { margin-bottom: 96px; }
  /* the word runs along the stack, rotated 90°, behind the cards */
  .lp-timeline__word {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
    font-size: clamp(240px, 92vw, 372px);
  }
  /* marker was cut by the screen edge (card is 20px from it) */
  .lp-tl-step__marker { right: -10px; }
}

/* Mobile animations: only when the script marked the section (.has-js) —
   without JS the cards stay visible. Badges are swung by the driver. */
@media (max-width: 959px) and (prefers-reduced-motion: no-preference) {
  .lp-timeline.has-js .lp-tl-step { opacity: 0; transform: translateY(28px) scale(.97); }
  .lp-timeline.has-js .lp-tl-step.is-in {
    opacity: 1;
    transform: none;
    transition: opacity .6s ease, transform .7s cubic-bezier(.22, .8, .3, 1);
  }
  .lp-timeline.has-js .lp-tl-step__marker { opacity: 0; transform: rotate(-14deg) translateY(-18px) scale(.8); }
  .lp-timeline.has-js .lp-tl-step.is-in .lp-tl-step__marker {
    opacity: 1;
    transform: rotate(-14deg);
    transition: opacity .45s ease .25s, transform .55s cubic-bezier(.34, 1.56, .64, 1) .25s;
  }
  .lp-timeline.has-js .lp-tl-step__avatar { opacity: 0; transform: scale(.6); }
  .lp-timeline.has-js .lp-tl-step.is-in .lp-tl-step__avatar {
    opacity: 1;
    transform: none;
    transition: opacity .4s ease .15s, transform .5s cubic-bezier(.34, 1.56, .64, 1) .15s;
  }
  .lp-timeline.has-js .lp-tl-step.is-in .lp-tl-step__avatar:nth-child(2) { transition-delay: .28s; }
  .lp-timeline__word {
    transform: translate(-50%, -50%) rotate(90deg) translateX(var(--lp-tl-hp, 0px));
    transition: transform .15s linear;
  }
}

/* ---- 05b-software.css ---- */
/* ============================================================
   05b — «software» panel: the plugins the studio publishes  (#software)
   A sibling of the «tecnología» panel in 05-tech.css: same appendix tab,
   same two-tone title, same card silhouette, radii and hover. It is a
   separate top-level record placed right after the dark stack band, so it
   opens on a dark shelf of its own (--lp-soft-shelf, the exact colour the
   stack gradient ends on) — that shelf is what the tab's shoulder rides on,
   the same trick the tecnología tab plays on the dark timeline tail.
   Assets are private copies under assets/software/ (a shared SVG must never
   be edited under its own name).
   Type/spacing follow the tecnología panel's per-artboard values and scale
   with vw inside a breakpoint exactly like the rest of the page.
   ============================================================ */
.lp-soft {
  --lp-soft-shelf: min(96px, 6.67vw);      /* dark strip the tab's shoulder sits on */
  --lp-soft-shelf-bg: #0b333d;             /* the timeline gradient's last stop */
  display: flow-root;
  padding: var(--lp-soft-shelf) 0 min(76px, 5.28vw);
  /* the shelf continues the section above — the timeline, whose gradient ends on
     this colour — so the two meet without a seam, then
     the record drops back to the page background before «garantías» */
  background: linear-gradient(var(--lp-soft-shelf-bg) 0 var(--lp-soft-shelf), var(--lp-bg) var(--lp-soft-shelf) 100%);
}

.lp-soft__panel {
  position: relative;
  /* 24px gutters up to the 1440 artboard, then the panel stops growing and
     centres — past 1440 the content column is capped anyway, and a panel that
     kept spreading would leave an ever wider empty band each side */
  max-width: min(1392px, 100% - 48px);
  margin: 0 auto;
  padding: 0 0 min(73.7px, 5.1181vw);
  border-radius: 30px;
  background: linear-gradient(0deg, #c8f6fc 0%, #e7fbfe 75%);
}
/* the artboard's own content column, 12u wider than .lp-container on each
   side — identical to .lp-tech__inner so the two panels share one x axis */
.lp-soft__inner {
  display: flow-root;                  /* keeps the tab's compensation margin inside */
  position: relative;                  /* positioning box for the tab */
  width: 100%;
  max-width: min(1224px, 85vw);
  margin: 0 auto;
}

/* ---------- appendix tab ---------- */
.lp-soft__tab {
  --lp-soft-tab-w: clamp(150px, 19vw, 237px);
  position: absolute;
  left: 0;
  top: calc(var(--lp-soft-tab-w) * -44 / 237);
  z-index: 2;
  width: var(--lp-soft-tab-w);
  aspect-ratio: 237 / 110;
  background: #e7fbfe;                 /* the panel's own top colour */
  -webkit-mask: url(../assets/software/tab-mask-soft.svg) center / 100% 100% no-repeat;
  mask: url(../assets/software/tab-mask-soft.svg) center / 100% 100% no-repeat;
  pointer-events: none;
}
.lp-soft__tab-label {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 12%;
  text-align: center;
  font-size: min(18px, 1.25vw);
  font-weight: 500;
  line-height: 1.133;
  letter-spacing: -.04em;
  text-transform: lowercase;
  color: var(--lp-teal-600);           /* 4.5:1 on the panel's #e7fbfe top */
}

/* ---------- title ---------- */
.lp-soft__title {
  /* em, not px: the break after the comma then lands the same way at every
     width, because the font-size itself is the viewport-scaled measure */
  max-width: 12.5em;
  margin: min(129.6px, 9vw) 0 min(111.6px, 7.75vw);
  font-size: min(60px, 4.1667vw);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.06em;
  color: var(--lp-teal-600);
}
/* block, so the colour change always falls on its own line — a max-width tuned
   to force the break is a hair's breadth away from letting «y» ride up */
.lp-soft__title-lead { display: block; color: var(--lp-teal-900); }
/* the "opens on WordPress.org" hint: .lp-sr-only is absolute but has no
   coordinates, so pin it or its static position stretches the card's scroll box */
.lp-soft__note { top: 0; left: 0; }

/* ---------- card row ---------- */
.lp-soft__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: min(15px, 1.0417vw);
}
.lp-soft__item {
  display: grid;                       /* one cell shared by the ratio spacer and the card */
  min-width: 0;
}
/* the design ratio is a floor, never a clip: the row is the taller of this
   spacer and the card's own content, so copy that outgrows the ratio (small
   phones, where the type sizes hit their legibility floor) makes the card
   taller instead of spilling past its painted shape. `aspect-ratio` on the
   card itself cannot do that — next to it `min-height: max-content` resolves
   straight back to the ratio, and the flex children then shrink and overflow. */
.lp-soft__item::before {
  content: '';
  grid-area: 1 / 1;
  padding-top: 64.4578%;               /* 214 / 332 — the card's design ratio */
}

.lp-soft__card {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 5.5% 10.5% 10.5%;
  background: url(../assets/software/card-shape-soft.svg) 0 0 / 100% 100% no-repeat;
}
.lp-soft__figure {
  aspect-ratio: 1 / .242;              /* fixed logo band: all three texts start on one line */
  display: flex;
  align-items: flex-start;
}
.lp-soft__icon { height: auto; }
.lp-soft__icon--robina { width: 23%; }
/* the wordmark is a wide, short mark: it is centred in the band the two
   square plugin icons top-align to, so the three read on one optical line */
/* The wordmark is set as live text, not an image: an SVG loaded through <img>
   cannot reach the page's webfonts, so it fell back to a system face, and its
   own viewBox cut the baseline off. As text it is Poppins, crisp at any size. */
.lp-soft__wordmark {
  align-self: center;
  font-size: min(30px, 2.08vw);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
  color: var(--lp-teal-900);
}
.lp-soft__wordmark-accent { color: var(--lp-teal-600); }
.lp-soft__icon--mwmb   { width: 23%; }

.lp-soft__name {
  margin: 0 0 min(6px, .42vw);
  font-size: min(19px, 1.32vw);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.035em;
  color: var(--lp-teal-900);
}
.lp-soft__desc {
  max-width: 88%;
  margin: 0;
  font-size: min(15.6px, 1.083vw);
  font-weight: 500;
  line-height: 1.3846;
  letter-spacing: -.028em;
  color: var(--lp-text-muted);
}
.lp-soft__meta {
  /* stops well before the notch the arrow sits in, and is wide enough to keep
     the longest line unwrapped once the size hits its 12px floor near 1200 */
  max-width: 80%;
  margin: auto 0 0;
  /* smallest text on the page: 12px is the legibility floor, the artboard
     value (12.6px @1440) the ceiling */
  font-size: clamp(12px, .875vw, 12.6px);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -.02em;
  color: var(--lp-teal-600);           /* 4.9:1 on the card's white fill */
}

.lp-soft__arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 15.1%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--lp-aqua);
  transition: background-color .2s var(--lp-ease);
}
.lp-soft__arrow svg {
  width: 100%;
  height: 100%;
  transform: rotate(45deg);
  transition: transform .2s var(--lp-ease);
}
/* the two plugin cards are links; the studio card in the middle is not */
.lp-soft__card--hover { cursor: pointer; }
.lp-soft__card--hover:hover .lp-soft__arrow,
.lp-soft__card--hover:focus-visible .lp-soft__arrow { background: var(--lp-teal-500); }
.lp-soft__card--hover:hover .lp-soft__arrow svg,
.lp-soft__card--hover:focus-visible .lp-soft__arrow svg { transform: none; }
.lp-soft__card--hover:focus-visible { outline-offset: 6px; }

/* ---------- 960–1199 (Tilda 960 artboard) -------------------------------- */
@media (max-width: 1199px) {
  .lp-soft__panel { max-width: calc(100% - 24px); padding: 0 0 7.53vw; border-radius: 28px; }
  .lp-soft__inner { max-width: none; padding: 0 5.32%; }
  .lp-soft__tab { left: 5.32%; }
  /* Every size below is the 960-artboard value written as vw AND capped at the
     value the base band computes at 1200px, so type never shrinks when the
     viewport crosses this breakpoint outward (the section has no Tilda
     original forcing a seam here, unlike the hero and the tecnología panel). */
  .lp-soft__tab-label { font-size: min(15px, 1.5625vw); }
  .lp-soft__title {
    margin-top: 11.45vw;
    margin-bottom: 5.21vw;
    font-size: min(50px, 4.7917vw);
    line-height: .8913;
    letter-spacing: -.0653em;
  }
  .lp-soft__cards { grid-template-columns: repeat(2, minmax(0, 380px)); gap: 14px; }
  .lp-soft__name { font-size: min(15.84px, 1.667vw); }
  .lp-soft__desc { font-size: min(13px, 1.3542vw); }
  /* the artboard value is 10.75px here, below the floor, so the floor holds
     across the whole band — and it meets the base band's floored 12px at 1200 */
  .lp-soft__meta { font-size: max(12px, min(10.5px, 1.12vw)); }
}

/* ---------- 640–959 (Tilda 640 artboard) --------------------------------- */
@media (max-width: 959px) {
  .lp-soft__panel { max-width: none; margin: 0; padding: 0 0 8.96vw; border-radius: 2.5vw; }
  .lp-soft__inner { max-width: none; padding: 0 4.7%; }
  .lp-soft__tab { left: 4.7%; }
  .lp-soft__tab-label { font-size: 1.875vw; }
  .lp-soft__title {
    margin-top: 8.21vw;
    margin-bottom: 4.6875vw;
    font-size: 6.25vw;
    line-height: .9;
    letter-spacing: -.025em;
  }
  .lp-soft__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6vw; }
  .lp-soft__card { padding: 6.6% 10.5% 10.5%; }
  .lp-soft__figure { aspect-ratio: 1 / .235; }
  .lp-soft__icon--robina { width: 21%; }
  .lp-soft__wordmark { font-size: 2.6vw; }
  .lp-soft__icon--mwmb   { width: 21%; }
  .lp-soft__name { font-size: 2.19vw; }
  /* the same 12px floor as the base band, and one step above it for the copy
     so the card keeps its size hierarchy once the floor starts to bite */
  .lp-soft__desc { max-width: 92%; font-size: max(13px, 1.875vw); }
  .lp-soft__meta { max-width: 80%; font-size: max(12px, 1.5vw); }
  .lp-soft__arrow { width: 15.8%; }
}

/* ---------- ≤639 (Tilda 320 artboard, zoomed) ---------------------------- */
@media (max-width: 639px) {
  /* the panel now starts on a page background of its own colour, so a
     protruding tab would be invisible: the label goes back inside the panel
     as plain text, exactly as the tecnología panel does here */
  .lp-soft { padding: 12.5vw 0 7.05vw; background: #e7fbfe; }
  .lp-soft__panel { margin: 0 3.1%; padding: 3.75vw 0 15.75vw; border-radius: 5vw; }
  .lp-soft__inner { padding: 0 6.67%; }
  .lp-soft__tab {
    position: static;
    width: auto;
    aspect-ratio: auto;
    background: none;
    -webkit-mask: none;
    mask: none;
    padding-left: 3.75vw;
    margin: 0 0 12.19vw;
    font-size: 3.75vw;                 /* the block's own strut, or the line box grows */
    line-height: 1.083;
  }
  .lp-soft__tab-label {
    position: static;
    text-align: left;
    font-size: 3.75vw;
    line-height: 1.083;
  }
  .lp-soft__title-lead { display: inline; }   /* one narrow column: let it wrap freely */
  .lp-soft__title {
    max-width: none;
    margin-top: 0;
    margin-bottom: 9.39vw;
    font-size: 8.125vw;
    line-height: .885;
    letter-spacing: -.0385em;
  }
  .lp-soft__cards { grid-template-columns: minmax(0, 1fr); gap: 3.26vw; }
  .lp-soft__card { padding: 4.2% 7.7% 7.5%; }
  .lp-soft__figure { aspect-ratio: 1 / .3; }
  .lp-soft__icon--robina { width: 19%; }
  .lp-soft__wordmark { font-size: max(20px, 5.6vw); }
  .lp-soft__icon--mwmb   { width: 19%; }
  .lp-soft__name { font-size: 4.375vw; }
  .lp-soft__desc { max-width: 84%; font-size: max(13px, 3.125vw); line-height: 1.4; }
  .lp-soft__meta { max-width: 74%; font-size: max(12px, 2.6vw); }
  .lp-soft__arrow { width: 15.4%; }
}

/* ---- 06-guarantee.css ---- */
/* ============================================================
   06 — Guarantee band «Factura española con IVA…» (#garantias)
   Original: Tilda zero-block (T396) whose artboard is zoomed to the
   viewport (1200/960/640/320 grids). The layout is plain flow here;
   --lp-g-u is "one artboard pixel" so sizes and spacing stay fluid
   between breakpoints exactly like the original (60px title at 1440,
   35.75px at 440), capped at the 1440 rendering on wider screens.
   ============================================================ */
.lp-guarantee {
  --lp-g-u: min(calc(100vw / 1200), 1.2px);
  position: relative;
  background: var(--lp-bg-dark);
  color: var(--lp-text-on-dark);
}
.lp-guarantee__inner {
  /* exactly one artboard wide: equals 100vw up to 1440, then centred (--lp-g-u is capped) */
  max-width: calc(1200 * var(--lp-g-u));
  margin: 0 auto;
  padding: calc(86 * var(--lp-g-u)) calc(20 * var(--lp-g-u)) calc(105 * var(--lp-g-u)) calc(90 * var(--lp-g-u));
}
.lp-guarantee__eyebrow {
  max-width: calc(560 * var(--lp-g-u));
  margin: 0 0 calc(40 * var(--lp-g-u));
  font-size: calc(15 * var(--lp-g-u));
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: calc(-.5 * var(--lp-g-u));
  text-transform: lowercase;
  color: var(--lp-white);
  opacity: .6;
}
.lp-guarantee__title {
  max-width: calc(664 * var(--lp-g-u));
  margin: 0;
  font-size: calc(50 * var(--lp-g-u));
  font-weight: 500;
  line-height: .9;
  letter-spacing: calc(-3 * var(--lp-g-u));
  color: var(--lp-white);
}
/* Decorative invoice mock-up on the free right-hand side of the band. Drawn
   inline so it scales crisply, carries no asset weight and follows the palette
   tokens; absolutely positioned, so the band keeps the height it always had.
   Below 960 the title claims the full artboard and there is no room — it goes. */
.lp-guarantee__art {
  position: absolute;
  right: calc(78 * var(--lp-g-u));
  top: 50%;
  width: calc(340 * var(--lp-g-u));
  transform: translateY(-50%);
  pointer-events: none;
}
.lp-guarantee__art svg { display: block; width: 100%; height: auto; overflow: visible; }

@media (max-width: 1199px) {            /* 960 grid */
  .lp-guarantee { --lp-g-u: calc(100vw / 960); }
  .lp-guarantee__inner { padding: calc(56 * var(--lp-g-u)) calc(20 * var(--lp-g-u)) calc(91 * var(--lp-g-u)) calc(50 * var(--lp-g-u)); }
  .lp-guarantee__eyebrow { margin-bottom: calc(18 * var(--lp-g-u)); }
  .lp-guarantee__title { max-width: calc(602 * var(--lp-g-u)); font-size: calc(46 * var(--lp-g-u)); }
  /* the 960 artboard is shorter and the title reaches further right: the
     mock-up shrinks to the room that is actually left beside it */
  .lp-guarantee__art { width: calc(228 * var(--lp-g-u)); right: calc(34 * var(--lp-g-u)); }
}
@media (max-width: 959px) {             /* 640 grid */
  .lp-guarantee { --lp-g-u: calc(100vw / 640); }
  .lp-guarantee__art { display: none; }
  .lp-guarantee__inner { padding: 0 calc(20 * var(--lp-g-u)) calc(76 * var(--lp-g-u)) calc(30 * var(--lp-g-u)); }
  .lp-guarantee__eyebrow { margin-bottom: calc(17 * var(--lp-g-u)); }
  .lp-guarantee__title { max-width: calc(565 * var(--lp-g-u)); font-size: calc(40 * var(--lp-g-u)); letter-spacing: calc(-1 * var(--lp-g-u)); }
}
@media (max-width: 639px) {             /* 320 grid (also used for the 480 artboard) */
  .lp-guarantee { --lp-g-u: calc(100vw / 320); }
  .lp-guarantee__inner { padding: calc(8 * var(--lp-g-u)) calc(14 * var(--lp-g-u)) calc(53 * var(--lp-g-u)) calc(20 * var(--lp-g-u)); }
  .lp-guarantee__eyebrow { margin-bottom: calc(30 * var(--lp-g-u)); font-size: calc(12 * var(--lp-g-u)); }
  .lp-guarantee__title { max-width: calc(286 * var(--lp-g-u)); font-size: calc(26 * var(--lp-g-u)); }
}

/* ---- 06b-why.css ---- */
/* ============================================================
   06b — «por qué aquí»: what being registered in Spain changes  (#por-que-aqui)
   Sits directly under the dark «garantías» band, which states the claim in one
   line; this panel is the detail. It therefore opens as a NEW light block
   rather than continuing the dark band: four paragraphs of running copy on
   --lp-bg-dark would turn the page's one bold statement into a wall of text
   and swallow the band's punchline.
   The transition is not a hard edge — the record keeps a dark shelf on top,
   the exact colour of the band above it (--lp-bg-dark), and the ice panel's
   rounded top rises out of it. That shelf is also what the appendix tab's
   shoulder rides on, the same trick 05b-software plays on the timeline tail.
   Geometry follows the software panel (same x axis, radii, tab cut, min(px,vw)
   scaling per artboard); the cards are the page's plain white card —
   var(--lp-shadow-card), generous radius — not the SVG shape 05b uses, because
   these grow with their copy and a fixed shape would clip it.
   Mask asset is this section's own copy (assets/why/), never 05b's file.
   ============================================================ */
.lp-why {
  --lp-why-shelf: min(96px, 6.67vw);   /* dark strip the tab's shoulder sits on */
  display: flow-root;
  padding: var(--lp-why-shelf) 0 min(96px, 6.67vw);
  /* the shelf continues the «garantías» band above, then the record drops back
     to the page background before the next section */
  background: linear-gradient(var(--lp-bg-dark) 0 var(--lp-why-shelf), var(--lp-bg) var(--lp-why-shelf) 100%);
  /* 01-base.css only lists the original anchors, so this one clears the fixed
     header on its own (a shared link opened straight at #por-que-aqui) */
  scroll-margin-top: calc(var(--lp-header-h) + 16px);
}

.lp-why__panel {
  position: relative;
  /* identical to the software panel: 24px gutters up to the 1440 artboard,
     then it stops growing and centres */
  max-width: min(1392px, 100% - 48px);
  margin: 0 auto;
  padding: 0 0 min(76px, 5.28vw);
  border-radius: 30px;
  background: linear-gradient(0deg, #c8f6fc 0%, #e7fbfe 75%);
}
/* the artboard's content column — the same width as .lp-soft__inner, so the
   two panels' text starts on one x axis */
.lp-why__inner {
  display: flow-root;                  /* keeps the tab's positioning context inside */
  position: relative;
  width: 100%;
  max-width: min(1224px, 85vw);
  margin: 0 auto;
}

/* ---------- appendix tab ---------- */
.lp-why__tab {
  --lp-why-tab-w: clamp(150px, 19vw, 237px);
  position: absolute;
  left: 0;
  top: calc(var(--lp-why-tab-w) * -44 / 237);
  z-index: 2;
  width: var(--lp-why-tab-w);
  aspect-ratio: 237 / 110;
  background: #e7fbfe;                 /* the panel's own top colour */
  -webkit-mask: url(../assets/why/tab-mask-why.svg) center / 100% 100% no-repeat;
  mask: url(../assets/why/tab-mask-why.svg) center / 100% 100% no-repeat;
  pointer-events: none;
}
.lp-why__tab-label {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 12%;
  text-align: center;
  font-size: min(18px, 1.25vw);
  font-weight: 500;
  line-height: 1.133;
  letter-spacing: -.04em;
  text-transform: lowercase;
  color: var(--lp-teal-600);           /* 4.5:1 on the panel's #e7fbfe top */
}

/* ---------- title ---------- */
.lp-why__title {
  /* em, not px: the break after the comma lands the same way at every width,
     because the font-size is itself the viewport-scaled measure */
  max-width: 16em;
  margin: min(122px, 8.47vw) 0 min(66px, 4.58vw);
  font-size: min(56px, 3.889vw);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.06em;
  color: var(--lp-teal-600);
}
/* block, so the two-tone break always falls between the two halves */
.lp-why__title-lead { display: block; color: var(--lp-teal-900); }

/* ---------- the four blocks ---------- */
.lp-why__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: min(20px, 1.39vw);
}
/* the <li> IS the card: one white sheet per idea, stretched by the grid so the
   two in a row end level even though their copy differs in length */
.lp-why__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: min(42px, 2.92vw) min(40px, 2.78vw) min(44px, 3.06vw);
  border-radius: min(30px, 2.08vw);
  background: var(--lp-white);
  box-shadow: var(--lp-shadow-card);
}
.lp-why__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(54px, 3.75vw);
  aspect-ratio: 1;
  margin: 0 0 min(26px, 1.81vw);
  border-radius: 50%;
  background: var(--lp-aqua);          /* same disc as the software card's arrow */
}
.lp-why__icon svg { width: 58%; height: auto; }

.lp-why__lead {
  margin: 0 0 max(11px, min(14px, .97vw));
  font-size: min(26px, 1.806vw);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.035em;
  color: var(--lp-teal-900);
}
.lp-why__text {
  margin: 0;
  /* the running copy of the page: 17px on the 1440 artboard, never below the
     13px this section keeps as its floor (12px is the page-wide minimum) */
  font-size: max(13px, min(17px, 1.18vw));
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.012em;
  color: var(--lp-teal-text);          /* 8.4:1 on white */
}

/* ---------- 960–1199 (Tilda 960 artboard) -------------------------------- */
@media (max-width: 1199px) {
  .lp-why { --lp-why-shelf: min(80px, 6.67vw); padding-bottom: 6.67vw; }
  .lp-why__panel { max-width: calc(100% - 24px); padding: 0 0 7.53vw; border-radius: 28px; }
  .lp-why__inner { max-width: none; padding: 0 5.32%; }
  .lp-why__tab { left: 5.32%; }
  /* every size below is the 960-artboard value as vw AND capped at what the
     base band computes at 1200px, so nothing shrinks when the viewport crosses
     this breakpoint outward */
  .lp-why__tab { --lp-why-tab-w: clamp(160px, 19vw, 237px); }
  .lp-why__tab-label { font-size: min(15px, 1.5625vw); }
  .lp-why__title {
    margin-top: 10.2vw;
    margin-bottom: 4.6vw;
    font-size: min(46px, 4.4vw);
    letter-spacing: -.055em;
  }
  .lp-why__list { gap: 1.4vw; }
  .lp-why__card { padding: 3.3vw 3.1vw 3.5vw; border-radius: 24px; }
  .lp-why__icon { width: min(48px, 4.2vw); margin-bottom: 2vw; }
  .lp-why__lead { margin-bottom: max(11px, 1.15vw); font-size: min(21px, 2.02vw); }
  .lp-why__text { font-size: max(13px, min(14.2px, 1.36vw)); }
}

/* ---------- 640–959 (Tilda 640 artboard) --------------------------------- */
@media (max-width: 959px) {
  .lp-why { --lp-why-shelf: 8vw; padding-bottom: 9vw; }
  .lp-why__panel { max-width: none; margin: 0; padding: 0 0 8.96vw; border-radius: 2.5vw; }
  .lp-why__inner { max-width: none; padding: 0 4.7%; }
  .lp-why__tab { left: 4.7%; --lp-why-tab-w: clamp(168px, 23vw, 220px); }
  .lp-why__tab-label { font-size: max(12px, 1.72vw); }
  .lp-why__title {
    /* wide enough for the accent half to stay on one line at this artboard */
    max-width: 17em;
    margin-top: 8.4vw;
    margin-bottom: 4.7vw;
    font-size: 5.3vw;
    letter-spacing: -.04em;
  }
  .lp-why__list { gap: 1.9vw; }
  .lp-why__card { padding: 4.4vw 4vw 4.6vw; border-radius: 3.2vw; }
  .lp-why__icon { width: 6.6vw; margin-bottom: 2.8vw; }
  .lp-why__lead { margin-bottom: max(12px, 1.8vw); font-size: max(17px, 2.66vw); }
  .lp-why__text { font-size: max(13px, 1.95vw); line-height: 1.48; }
}

/* ---------- ≤639 (Tilda 320 artboard, zoomed) ---------------------------- */
@media (max-width: 639px) {
  /* one narrow column: a protruding tab has nowhere to go, so the label goes
     back inside the panel as plain text — the same move 05b-software makes */
  .lp-why { --lp-why-shelf: 9vw; padding-bottom: 11vw; }
  .lp-why__panel { margin: 0 3.1%; padding: 4.4vw 0 11vw; border-radius: 5vw; }
  .lp-why__inner { padding: 0 6.67%; }
  .lp-why__tab {
    position: static;
    width: auto;
    aspect-ratio: auto;
    background: none;
    -webkit-mask: none;
    mask: none;
    margin: 0 0 9.5vw;
    padding-left: 0;
    font-size: 3.75vw;                 /* the block's own strut, or the line box grows */
    line-height: 1.083;
  }
  .lp-why__tab-label {
    position: static;
    text-align: left;
    font-size: max(12px, 3.75vw);
    line-height: 1.083;
  }
  .lp-why__title-lead { display: inline; }   /* let the two halves wrap freely */
  .lp-why__title {
    max-width: none;
    margin-top: 0;
    margin-bottom: 8vw;
    font-size: 8.125vw;
    line-height: .9;
    letter-spacing: -.038em;
  }
  .lp-why__list { grid-template-columns: minmax(0, 1fr); gap: 4vw; }
  .lp-why__card { padding: 7.5vw 7vw 8vw; border-radius: 6vw; }
  .lp-why__icon { width: max(44px, 12.5vw); margin-bottom: 5.6vw; }
  .lp-why__lead { margin-bottom: max(12px, 3.4vw); font-size: max(19px, 5.3vw); line-height: 1.1; }
  .lp-why__text { font-size: max(14px, 3.9vw); line-height: 1.45; }
}

/* ---------- ≤479 --------------------------------------------------------- */
@media (max-width: 479px) {
  .lp-why__card { padding: 8.4vw 7.4vw 8.8vw; }
  .lp-why__lead { font-size: max(18px, 5.6vw); }
  .lp-why__text { font-size: max(13.5px, 4.05vw); }
}

/* ---- 06c-process.css ---- */
/* ============================================================
   06c — «cómo trabajamos»: the four steps of a project  (#proceso)
   The band the page's old «Cómo trabajamos» label promised and never
   delivered — it now introduces the history timeline as «El estudio»,
   so the process itself lives here, between «por qué aquí» and the
   projects gallery.

   Idiom: the light panel of 05b-software — ice gradient, 30px radius,
   appendix tab cut from a mask, two-tone display title — but the body is
   deliberately NOT another card row: four steps run down one rail, each
   opened by its own numeral in --lp-teal-500. The numeral is part of the
   approved copy string («1. Primer contacto»), so it is not repeated as
   a marker anywhere: the <ol> carries no list-style and the numeral span
   is simply lifted out of the heading's flow into the rail gutter.

   Sizing is fluid clamp() from the 1440 artboard down to 320 with no
   step at the breakpoints; the four media queries only change structure
   (panel gutters, the tab's shape, and the collapse to one column).
   Assets are private copies under assets/process/ — a shared mask must
   never be edited under another section's name.
   ============================================================ */
.lp-proc {
  --lp-proc-col:     clamp(64px, 9.17vw, 132px);   /* rail + numeral gutter */
  --lp-proc-cgap:    clamp(18px, 2.78vw, 40px);    /* gutter → copy */
  --lp-proc-gap:     clamp(32px, 4.03vw, 58px);    /* step → step */
  --lp-proc-num-fs:  clamp(34px, 4.44vw, 64px);
  --lp-proc-num-lh:  .92;
  --lp-proc-rail-w:  2px;
  --lp-proc-rail-in: clamp(10px, 1vw, 16px);       /* rail keeps clear of both numerals */
  --lp-proc-ice-top: #e7fbfe;                      /* the panel gradient's top stop = the tab's fill */
  padding: clamp(48px, 5.28vw, 76px) 0;
  background: var(--lp-bg);
  /* a link straight to /…#proceso uses the browser's own fragment jump,
     which knows nothing about the fixed header (01-base.css does this for
     the anchors it already knew about) */
  scroll-margin-top: calc(var(--lp-header-h) + 16px);
}

.lp-proc__panel {
  position: relative;
  /* 24px gutters up to the 1440 artboard, then the panel stops growing and
     centres — identical geometry to the software panel above it */
  max-width: min(1392px, 100% - 48px);
  margin: 0 auto;
  padding: 0 0 clamp(44px, 6.25vw, 90px);
  border-radius: 30px;
  background: linear-gradient(0deg, #c8f6fc 0%, var(--lp-proc-ice-top) 75%);
}
.lp-proc__inner {
  display: flow-root;                  /* keeps the head's top margin inside the panel */
  position: relative;                  /* positioning box for the tab */
  width: 100%;
  max-width: min(1224px, 85vw);
  margin: 0 auto;
}

/* ---------- appendix tab ---------- */
.lp-proc__tab {
  /* wider than the software tab: «cómo trabajamos» is two words, and only the
     mask's raised plateau (x 48→192 of 237, i.e. 60.8% of the width) can carry
     the label — at 184px that plateau is 112px, the 12px label 102px */
  --lp-proc-tab-w: clamp(184px, 20vw, 250px);
  position: absolute;
  left: 0;
  top: calc(var(--lp-proc-tab-w) * -44 / 237);
  z-index: 2;
  width: var(--lp-proc-tab-w);
  aspect-ratio: 237 / 110;
  background: var(--lp-proc-ice-top);
  -webkit-mask: url(../assets/process/tab-mask-process.svg) center / 100% 100% no-repeat;
  mask: url(../assets/process/tab-mask-process.svg) center / 100% 100% no-repeat;
  pointer-events: none;
}
.lp-proc__tab-label {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 12%;
  text-align: center;
  font-size: clamp(12px, 1.18vw, 17px);
  font-weight: 500;
  line-height: 1.133;
  letter-spacing: -.04em;
  text-transform: lowercase;
  color: var(--lp-teal-600);           /* 4.5:1 on the panel's #e7fbfe top */
}

/* ---------- head: title + decorative sheet ---------- */
.lp-proc__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(24px, 3vw, 60px);
  margin: clamp(56px, 9vw, 130px) 0 clamp(34px, 5.6vw, 80px);
}
.lp-proc__title {
  /* em, not px: the break after the comma lands the same way at every width,
     because the font-size itself is the viewport-scaled measure */
  max-width: 13em;
  margin: 0;
  font-size: clamp(26px, 4.1667vw, 60px);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.06em;
  color: var(--lp-teal-600);
}
/* block, so the colour change always falls on its own line */
.lp-proc__title-lead { display: block; color: var(--lp-teal-900); }

/* Decorative only (aria-hidden): the same white-card idiom as the invoice in
   «garantías», four checkpoints standing for the four steps. Drawn inline so
   it scales crisply, weighs nothing and follows the palette. */
.lp-proc__art { width: clamp(180px, 17vw, 250px); }
.lp-proc__art svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- the four steps ---------- */
.lp-proc__steps {
  display: grid;
  row-gap: var(--lp-proc-gap);
}
.lp-proc__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--lp-proc-col) minmax(0, 1fr);
  column-gap: var(--lp-proc-cgap);
}
.lp-proc__step-title,
.lp-proc__text { grid-column: 2; }

/* The numeral is lifted out of the heading's flow into the gutter, so the
   heading text starts at the copy column while the string itself stays whole
   («1. Primer contacto»). The source space between the two spans then sits at
   the start of the line box and is collapsed away by normal white-space
   processing — no stray indent, no second numeral. */
.lp-proc__num {
  position: absolute;
  left: 0;
  top: -.06em;
  width: var(--lp-proc-col);
  font-size: var(--lp-proc-num-fs);
  font-weight: 800;
  line-height: var(--lp-proc-num-lh);
  letter-spacing: -.05em;
  text-align: center;
  color: var(--lp-teal-500);           /* 3.1:1 on the ice panel — large text only */
}

/* the rail that connects one numeral to the next; the last step ends it */
.lp-proc__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--lp-proc-col) / 2 - var(--lp-proc-rail-w) / 2);
  top: calc(var(--lp-proc-num-fs) * var(--lp-proc-num-lh) + var(--lp-proc-rail-in));
  bottom: calc(var(--lp-proc-rail-in) - var(--lp-proc-gap));
  width: var(--lp-proc-rail-w);
  border-radius: var(--lp-proc-rail-w);
  background: var(--lp-aqua);
  opacity: .6;
}

.lp-proc__step-title {
  margin: 0;
  font-size: clamp(19px, 1.81vw, 26px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.035em;
  color: var(--lp-teal-900);
}
.lp-proc__text {
  max-width: 46em;                     /* ~70 characters, the readable measure */
  margin: clamp(8px, .83vw, 12px) 0 0;
  font-size: clamp(14px, 1.18vw, 17px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--lp-teal-text);          /* 7.4:1 on the ice panel */
}

/* ---------- 960–1199 (Tilda 960 artboard) -------------------------------- */
@media (max-width: 1199px) {
  .lp-proc__panel { max-width: calc(100% - 24px); border-radius: 28px; }
  .lp-proc__inner { max-width: none; padding: 0 5.32%; }
  .lp-proc__tab { left: 5.32%; }
}

/* ---------- 640–959 (Tilda 640 artboard) --------------------------------- */
@media (max-width: 959px) {
  .lp-proc__panel { border-radius: 24px; }
  .lp-proc__inner { padding: 0 4.7%; }
  .lp-proc__tab { left: 4.7%; }
  /* the title claims the whole artboard here, exactly as the guarantee band's
     does — there is no room left beside it for the sheet */
  .lp-proc__head { grid-template-columns: minmax(0, 1fr); }
  .lp-proc__art { display: none; }
  .lp-proc__title { max-width: 12em; }
}

/* ---------- ≤639 (Tilda 320/480 artboards) -------------------------------
   One column: the numeral goes back into the heading's own line, the rail
   gives way to hairlines and the copy takes the full width — at 320 a
   numeral gutter would leave the paragraphs about 190px wide. */
@media (max-width: 639px) {
  .lp-proc { padding: clamp(36px, 9vw, 56px) 0; }
  /* 3.1% each side — the same inset the software panel takes at this width,
     so the two panels line up when the page is scrolled past on a phone */
  .lp-proc__panel { max-width: 93.8%; padding-bottom: clamp(34px, 9vw, 56px); border-radius: 5vw; }
  .lp-proc__inner { padding: 0 6.67%; }
  /* the tab's shoulder would now hang over a panel edge only a few pixels
     from the viewport: the label goes back inside as plain text, exactly as
     the software panel does at this width */
  .lp-proc__tab {
    position: static;
    width: auto;
    aspect-ratio: auto;
    margin: 0 0 clamp(26px, 8vw, 44px);
    padding-top: clamp(22px, 6.5vw, 40px);
    background: none;
    -webkit-mask: none;
    mask: none;
    font-size: max(12px, min(16px, 3.75vw));   /* the block's own strut */
    line-height: 1.083;
  }
  .lp-proc__tab-label {
    position: static;
    text-align: left;
    font-size: max(12px, min(16px, 3.75vw));
    line-height: 1.083;
  }
  .lp-proc__head { margin: 0 0 clamp(26px, 7.5vw, 44px); }
  .lp-proc__title { max-width: none; font-size: min(40px, 8.125vw); line-height: .95; letter-spacing: -.038em; }
  .lp-proc__title-lead { display: inline; }   /* one narrow column: let it wrap freely */

  .lp-proc__steps { row-gap: 0; }
  .lp-proc__step { display: block; }
  .lp-proc__step + .lp-proc__step {
    margin-top: clamp(20px, 5.6vw, 30px);
    padding-top: clamp(20px, 5.6vw, 30px);
    border-top: 1px solid var(--lp-aqua-3);
  }
  .lp-proc__step:not(:last-child)::after { content: none; }
  .lp-proc__num {
    position: static;
    width: auto;
    font-size: max(24px, min(32px, 6.4vw));
    line-height: 1;
    margin-right: .12em;
  }
  .lp-proc__step-title { font-size: max(17px, min(22px, 4.5vw)); line-height: 1.2; }
  /* 13px is the legibility floor (it bites below ~380), 16px the ceiling so the
     copy does not overtake the step name at the top of this band */
  .lp-proc__text { max-width: none; font-size: max(13px, min(16px, 3.45vw)); line-height: 1.5; }
}

/* No ≤479 block: the ≤639 band is written in % and vw all the way down to the
   320 artboard, and every type size there already sits on its px floor. */

/* ---- 07-projects.css ---- */
/* ============================================================
   07 — Proyectos (original rec733640049, custom "mw-comm" block)
   Big white/ice card with an "appendix tab" cut out of its shape
   (assets/projects/card-stretch.svg drives the silhouette + gradient).
   Left column: gallery slider of published stores; right column: claim rows.
   ============================================================ */
.lp-projects {
  background: var(--lp-bg);
  padding: clamp(40px, 5vw, 72px) clamp(16px, 4vw, 40px);
}

/* ---------- Card ---------- */
.lp-projects__card {
  --lp-projects-tab-w: clamp(150px, 19vw, 237px);
  --lp-projects-ice: #c9f6fc;          /* tab fill + card gradient top */
  --lp-projects-row-hover: #dff7fb;    /* claim-row :hover fill */
  position: relative;
  isolation: isolate;                  /* keep the tab/caption z-order local to the card */
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(44px, 4.2vw, 64px) clamp(28px, 3.4vw, 50px) clamp(42px, 4.4vw, 64px);
  border-radius: var(--lp-r-btn);
  background: url(../assets/projects/card-stretch.svg) center / 100% 100% no-repeat;
}

/* ---------- "proyectos" appendix tab ---------- */
.lp-projects__tab {
  position: absolute;
  left: clamp(14px, 2.6vw, 34px);
  top: calc(var(--lp-projects-tab-w) * -44 / 237);
  z-index: -1;                         /* tucks under the copy: its lower edge overlaps the title */
  width: var(--lp-projects-tab-w);
  aspect-ratio: 237 / 110;
  background: var(--lp-projects-ice);
  -webkit-mask: url(../assets/projects/tab-mask.svg) center / 100% 100% no-repeat;
  mask: url(../assets/projects/tab-mask.svg) center / 100% 100% no-repeat;
  pointer-events: none;
}
.lp-projects__tab-label {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 13%;
  text-align: center;
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.1;
  text-transform: lowercase;
  color: var(--lp-teal-600);
}

/* ---------- Title ---------- */
.lp-projects__title {
  margin: 0 0 clamp(26px, 3.2vw, 42px);
  max-width: min(520px, 100%);
  font-weight: 800;
  font-size: clamp(28px, 3.7vw, 50px);
  line-height: 1;
  letter-spacing: var(--lp-tracking-tight);
  color: var(--lp-text);
}
.lp-projects__title-accent { color: var(--lp-teal-500); }

/* ---------- Columns ---------- */
.lp-projects__cols {
  display: grid;
  grid-template-columns: minmax(0, 550fr) minmax(0, 408fr);
  gap: clamp(24px, 5.5vw, 80px);
  align-items: start;
}

/* ---------- Gallery ---------- */
.lp-projects__gallery { position: relative; }

.lp-projects__frame {
  position: relative;
  margin: 0;
  border-radius: var(--lp-r-md);
}

.lp-projects__slides {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--lp-r-md);
}
.lp-projects__slides::-webkit-scrollbar { display: none; }
.lp-projects__slides img {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 550 / 372;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--lp-r-md);
  scroll-snap-align: start;
  background: var(--lp-mint-50);
}

/* Caption notched into the bottom-left corner of the frame */
.lp-projects__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  max-width: 58%;
  padding: 20px 30px 8px 2px;
  background: var(--lp-white);
  border-radius: 0 28px 0 var(--lp-r-md);
  font-weight: 600;
  font-size: var(--lp-small);
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--lp-text);
}
/* The caption names the project on screen, so it changes with the slide. The
   two lines swap under a short fade the script drives with .is-fading. */
.lp-projects__cap-name,
.lp-projects__cap-sub { display: block; }
.lp-projects__cap-sub {
  font-weight: 500;
  color: var(--lp-text-muted);
}
.lp-projects__cap-name,
.lp-projects__cap-sub { transition: opacity .22s ease; }
.lp-projects__cap.is-fading .lp-projects__cap-name,
.lp-projects__cap.is-fading .lp-projects__cap-sub { opacity: 0; }

.lp-projects__cap::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: 0;
  width: 28px;
  height: 28px;
  background: radial-gradient(circle at 100% 0, transparent 28px, var(--lp-white) 29px);
}

/* the project names are links now: underlined on hover, wrapping on narrow rows */
.lp-projects__links a { color: var(--lp-teal-600); text-decoration: none; }
.lp-projects__links a:hover,
.lp-projects__links a:focus-visible { text-decoration: underline; }

/* ---------- Slider arrows ---------- */
.lp-projects__nav {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}
.lp-projects__arrow {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--lp-aqua);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--lp-dur-fast) ease;
}
.lp-projects__arrow:hover,
.lp-projects__arrow:focus-visible { background: var(--lp-teal-500); }
.lp-projects__arrow--prev { transform: scaleX(-1); }
.lp-projects__arrow svg {
  width: 20px;
  height: 20px;
  stroke: var(--lp-white);
  stroke-width: 2;
  fill: none;
}

/* ---------- Claim rows ---------- */
.lp-projects__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lp-projects__row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 91px;
  padding: 18px 20px 18px 34px;
  border-radius: var(--lp-r-pill);
  background: var(--lp-ice);
  transition: background var(--lp-dur-fast) ease;
}
.lp-projects__row:hover { background: var(--lp-projects-row-hover); }
.lp-projects__row p {
  flex: 1;
  margin: 0;
  font-size: var(--lp-small);
  line-height: var(--lp-small-lh);
  letter-spacing: -.01em;
  color: var(--lp-teal-text);
}
.lp-projects__row b {
  font-weight: 700;
  color: var(--lp-text);
}
.lp-projects__ico {
  flex: 0 0 55px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: var(--lp-aqua);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--lp-dur-fast) ease, opacity var(--lp-dur-fast) ease, background var(--lp-dur-fast) ease;
}
.lp-projects__ico img { width: 32px; height: 32px; }
.lp-projects__row:hover .lp-projects__ico { transform: scale(.9); opacity: .6; }

/* ---------- Tablet: single column, flat gradient card ---------- */
@media (max-width: 959px) {
  .lp-projects__card {
    background: linear-gradient(180deg, var(--lp-projects-ice) 0%, var(--lp-projects-ice) 12%, var(--lp-white) 40%);
  }
  .lp-projects__cols { grid-template-columns: 1fr; }
  .lp-projects__title { max-width: none; }
}

/* ---------- Phone ---------- */
@media (max-width: 639px) {
  .lp-projects__card { --lp-projects-tab-w: 132px; }
  .lp-projects__tab { left: 12px; }
  .lp-projects__cap {
    max-width: 64%;
    padding: 14px 18px 2px 4px;
    font-size: var(--lp-tiny);
  }
  /* The caption names the project on screen, so it changes with the slide. The
   two lines swap under a short fade the script drives with .is-fading. */
.lp-projects__cap-name,
.lp-projects__cap-sub { display: block; }
.lp-projects__cap-sub {
  font-weight: 500;
  color: var(--lp-text-muted);
}
.lp-projects__cap-name,
.lp-projects__cap-sub { transition: opacity .22s ease; }
.lp-projects__cap.is-fading .lp-projects__cap-name,
.lp-projects__cap.is-fading .lp-projects__cap-sub { opacity: 0; }

.lp-projects__cap::after {
    right: -18px;
    width: 18px;
    height: 18px;
    background: radial-gradient(circle at 100% 0, transparent 18px, var(--lp-white) 19px);
  }
  .lp-projects__row {
    min-height: 78px;
    padding: 16px 16px 16px 24px;
  }
  .lp-projects__ico { flex-basis: 46px; width: 46px; height: 46px; }
}

/* ---- 07c-faq.css ---- */
/* ============================================================
   07c — «preguntas»: the questions buyers actually ask  (#faq)
   A sibling of the «software» panel: same ice panel, same appendix tab cut
   from a mask, same two-tone title. Inside it, one column of full-width
   disclosure rows built on native <details>/<summary> — so it works with
   zero JavaScript, is keyboard operable, and the browser's own find-in-page
   can open a closed answer.

   `name="lp-faq"` on every <details> makes the group an exclusive accordion
   in the browser itself (no script): opening one closes the rest, which is
   what keeps seven long answers from turning the section into a wall.

   Assets are a private copy under assets/faq/ (a shared SVG must never be
   edited under its own name), so the mask is tab-mask-faq.svg.
   Type and spacing follow the software panel's per-artboard values and scale
   with vw inside a breakpoint exactly like the rest of the page.
   ============================================================ */
.lp-faq {
  --lp-faq-row-hover: #f3fdff;          /* white card, barely tinted, on :hover */
  display: flow-root;
  padding: min(96px, 6.67vw) 0 min(76px, 5.28vw);
  background: var(--lp-bg);
  /* 01-base pins scroll-margin for the original anchors only; this one is ours */
  scroll-margin-top: calc(var(--lp-header-h) + 16px);
}

.lp-faq__panel {
  position: relative;
  /* 24px gutters up to the 1440 artboard, then the panel stops growing and
     centres — identical to the software panel, so the two share one x axis */
  max-width: min(1392px, 100% - 48px);
  margin: 0 auto;
  padding: 0 0 min(64px, 4.44vw);
  border-radius: 30px;
  background: linear-gradient(0deg, #c8f6fc 0%, #e7fbfe 75%);
}
.lp-faq__inner {
  display: flow-root;                   /* keeps the tab's positioning context inside */
  position: relative;
  width: 100%;
  max-width: min(1224px, 85vw);
  margin: 0 auto;
}

/* ---------- appendix tab ---------- */
.lp-faq__tab {
  --lp-faq-tab-w: clamp(150px, 19vw, 237px);
  position: absolute;
  left: 0;
  top: calc(var(--lp-faq-tab-w) * -44 / 237);
  z-index: 2;
  width: var(--lp-faq-tab-w);
  aspect-ratio: 237 / 110;
  background: #e7fbfe;                  /* the panel's own top colour */
  -webkit-mask: url(../assets/faq/tab-mask-faq.svg) center / 100% 100% no-repeat;
  mask: url(../assets/faq/tab-mask-faq.svg) center / 100% 100% no-repeat;
  pointer-events: none;
}
.lp-faq__tab-label {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 12%;
  text-align: center;
  font-size: min(18px, 1.25vw);
  font-weight: 500;
  line-height: 1.133;
  letter-spacing: -.04em;
  text-transform: lowercase;
  color: var(--lp-teal-600);            /* 4.5:1 on the panel's #e7fbfe top */
}

/* ---------- title ---------- */
.lp-faq__title {
  /* wide enough that the lead half never breaks: the accent gets its own line
     because .lp-faq__title-lead is a block, not because the box is tight */
  max-width: 16em;
  margin: min(126px, 8.75vw) 0 min(72px, 5vw);
  font-size: min(56px, 3.9vw);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.06em;
  color: var(--lp-teal-600);
}
/* block, so the colour change always falls on its own line */
.lp-faq__title-lead { display: block; color: var(--lp-teal-900); }

/* ---------- the rows ---------- */
.lp-faq__list {
  display: grid;
  gap: min(14px, .97vw);
}
.lp-faq__details {
  border-radius: var(--lp-r-md);
  background: var(--lp-white);
  transition: background-color var(--lp-dur-fast) ease-in-out,
              box-shadow var(--lp-dur-fast) ease-in-out;
}
.lp-faq__details:hover { background: var(--lp-faq-row-hover); }
/* the open row is the one the reader is in: it lifts off the panel */
.lp-faq__details[open] { background: var(--lp-white); box-shadow: var(--lp-shadow-card); }

.lp-faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: min(28px, 1.95vw);
  min-height: 44px;                     /* touch target, before padding */
  padding: min(24px, 1.67vw) min(30px, 2.08vw);
  border-radius: var(--lp-r-md);
  cursor: pointer;
  list-style: none;                     /* kill the default disclosure triangle */
}
.lp-faq__summary::-webkit-details-marker { display: none; }
.lp-faq__summary::marker { content: ''; }
.lp-faq__summary:focus-visible { outline-offset: -3px; }

.lp-faq__q {
  font-size: min(21px, 1.46vw);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.03em;
  color: var(--lp-teal-900);
}

/* plus → × : the same aqua puck the software cards use for their arrow */
.lp-faq__marker {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(40px, 2.78vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--lp-aqua);
  transition: background-color .2s var(--lp-ease);
}
.lp-faq__marker svg {
  width: 55%;
  height: 55%;
  transition: transform .2s var(--lp-ease);
}
.lp-faq__details:hover .lp-faq__marker,
.lp-faq__summary:focus-visible .lp-faq__marker { background: var(--lp-teal-500); }
.lp-faq__details[open] .lp-faq__marker { background: var(--lp-teal-500); }
.lp-faq__details[open] .lp-faq__marker svg { transform: rotate(45deg); }

/* ---------- the answers ---------- */
.lp-faq__answer { padding: 0 min(30px, 2.08vw) min(26px, 1.81vw); }
.lp-faq__a {
  /* a comfortable measure: the row is as wide as the panel, the prose is not */
  max-width: 68ch;
  font-size: min(16.5px, 1.15vw);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: -.01em;
  color: var(--lp-teal-text);           /* 8.1:1 on white */
}

/* A closed <details> has no height to animate from, so the fallback is a short
   fade of the answer itself. Browsers that expose ::details-content and
   keyword interpolation get the real thing — the row grows — and the fade is
   handed over to that transition instead. */
.lp-faq__details[open] .lp-faq__answer { animation: lp-faq-reveal var(--lp-dur) var(--lp-ease); }
@keyframes lp-faq-reveal {
  from { opacity: 0; transform: translateY(-6px); }
}
@supports selector(::details-content) and (interpolate-size: allow-keywords) {
  .lp-faq { interpolate-size: allow-keywords; }
  .lp-faq__details[open] .lp-faq__answer { animation: none; }
  .lp-faq__details::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: block-size var(--lp-dur) var(--lp-ease),
                opacity var(--lp-dur) var(--lp-ease),
                content-visibility var(--lp-dur) allow-discrete;
  }
  .lp-faq__details[open]::details-content { block-size: auto; opacity: 1; }
}

/* ---------- 960–1199 (Tilda 960 artboard) -------------------------------- */
@media (max-width: 1199px) {
  .lp-faq__panel { max-width: calc(100% - 24px); padding: 0 0 6.25vw; border-radius: 28px; }
  .lp-faq__inner { max-width: none; padding: 0 5.32%; }
  .lp-faq__tab { left: 5.32%; }
  /* Every size below is written as vw AND capped at the value the base band
     computes at 1200px, so type never shrinks when the viewport crosses this
     breakpoint outward. */
  .lp-faq__tab-label { font-size: min(15px, 1.5625vw); }
  .lp-faq__title {
    margin-top: 11.45vw;
    margin-bottom: 5.21vw;
    font-size: min(46px, 4.4vw);
    letter-spacing: -.0653em;
  }
  .lp-faq__list { gap: 1.15vw; }
  .lp-faq__summary { padding: 2.4vw 2.9vw; }
  .lp-faq__q { font-size: min(19px, 2vw); }
  .lp-faq__marker { width: min(38px, 3.75vw); }
  .lp-faq__answer { padding: 0 2.9vw 2.6vw; }
  .lp-faq__a { font-size: min(15.5px, 1.62vw); }
}

/* ---------- 640–959 (Tilda 640 artboard) --------------------------------- */
@media (max-width: 959px) {
  .lp-faq__panel { max-width: none; margin: 0; padding: 0 0 8vw; border-radius: 2.5vw; }
  .lp-faq__inner { max-width: none; padding: 0 4.7%; }
  .lp-faq__tab { left: 4.7%; }
  .lp-faq__tab-label { font-size: 1.875vw; }
  .lp-faq__title {
    margin-top: 8.21vw;
    margin-bottom: 4.6875vw;
    font-size: 5.6vw;
    line-height: .9;
    letter-spacing: -.025em;
  }
  .lp-faq__list { gap: 1.5vw; }
  .lp-faq__details { border-radius: 2.2vw; }
  .lp-faq__summary { padding: 3.1vw 3.6vw; border-radius: 2.2vw; }
  /* one step above the 12px floor, so the question keeps its rank over the
     answer once the floor starts to bite */
  .lp-faq__q { font-size: max(16px, 2.5vw); }
  .lp-faq__marker { width: max(36px, 4.7vw); }
  .lp-faq__answer { padding: 0 3.6vw 3.4vw; }
  .lp-faq__a { max-width: 62ch; font-size: max(14px, 2.1vw); line-height: 1.6; }
}

/* ---------- ≤639 (Tilda 320 artboard, zoomed) ---------------------------- */
@media (max-width: 639px) {
  /* the panel now starts on a page background of its own colour, so a
     protruding tab would be invisible: the label goes back inside the panel
     as plain text, exactly as the software panel does here */
  .lp-faq { padding: 12.5vw 0 7.05vw; background: #e7fbfe; }
  .lp-faq__panel { margin: 0 3.1%; padding: 3.75vw 0 12vw; border-radius: 5vw; }
  .lp-faq__inner { padding: 0 6.67%; }
  .lp-faq__tab {
    position: static;
    width: auto;
    aspect-ratio: auto;
    background: none;
    -webkit-mask: none;
    mask: none;
    padding-left: 3.75vw;
    margin: 0 0 12.19vw;
    font-size: 3.75vw;                  /* the block's own strut, or the line box grows */
    line-height: 1.083;
  }
  .lp-faq__tab-label {
    position: static;
    text-align: left;
    font-size: 3.75vw;
    line-height: 1.083;
  }
  .lp-faq__title-lead { display: inline; }   /* one narrow column: let it wrap freely */
  .lp-faq__title {
    max-width: none;
    margin-top: 0;
    margin-bottom: 8.4vw;
    font-size: 8.125vw;
    line-height: .885;
    letter-spacing: -.0385em;
  }
  .lp-faq__list { gap: 2.5vw; }
  .lp-faq__details { border-radius: 4vw; }
  .lp-faq__summary {
    align-items: flex-start;            /* two- and three-line questions keep the puck on the first line */
    gap: 4vw;
    padding: 4.7vw 5vw;
    border-radius: 4vw;
  }
  .lp-faq__q { font-size: max(15px, 4.06vw); line-height: 1.24; }
  .lp-faq__marker { width: max(34px, 8.4vw); }
  .lp-faq__answer { padding: 0 5vw 5.6vw; }
  .lp-faq__a { max-width: none; font-size: max(14px, 3.4vw); line-height: 1.58; }
}

/* ---- 08-cta.css ---- */
/* ============================================================
   08 — CTA «Cuéntanos qué vendes…» (original record rec733660530)

   The original is a Tilda zero-block: a 1200/960/640/320 artboard whose
   absolutely-positioned children are zoomed to the viewport. Here the card is
   a real flow box (grid on desktop, stacked column on phones) and only the two
   decorations — the sphere biting the left edge and the glass ring in the
   bottom-right — are absolute. `--lp-cta-u` is "one artboard pixel", so every
   size keeps the original's proportions and scales with the viewport exactly
   like the original (56px headline → 67.2px at 1440, 37.1px at 440), capped at
   the 1440 rendering on wider screens.

   The card face is the same SVG the original serves per artboard:
   a dark gradient plate ≥960, the cyan notched shapes below that.
   ============================================================ */

.lp-cta {
  --lp-cta-u: min(calc(100vw / 1200), 1.2px);
  position: relative;
  z-index: 11;                          /* above .lp-contact{z-index:10} so the ring stays visible */
  overflow-x: clip;                     /* no horizontal bleed … */
  overflow-y: visible;                  /* … but the ring and the sphere bleed past the artboard, as in the original */
  background: var(--lp-bg);
}

.lp-cta__inner {
  position: relative;
  max-width: calc(1200 * var(--lp-cta-u));   /* = 100vw up to 1440, then centred */
  margin: 0 auto;
  padding: calc(85 * var(--lp-cta-u)) 0 calc(11 * var(--lp-cta-u));
}

/* ---------- the plate ---------- */
.lp-cta__card {
  position: relative;
  display: grid;
  grid-template-columns: calc(545 * var(--lp-cta-u)) calc(264 * var(--lp-cta-u));
  column-gap: calc(42 * var(--lp-cta-u));
  align-content: start;
  width: calc(1020 * var(--lp-cta-u));
  min-height: calc(365 * var(--lp-cta-u));
  margin-left: calc(90 * var(--lp-cta-u));
  padding:
    calc(60 * var(--lp-cta-u)) calc(105 * var(--lp-cta-u))
    calc(50 * var(--lp-cta-u)) calc(64 * var(--lp-cta-u));
  border-radius: calc(24 * var(--lp-cta-u));
  background: url(../assets/cta/card-desktop.svg) 50% 50% / 100% 100% no-repeat;
  color: var(--lp-text-on-dark);
}

.lp-cta__title {
  margin: 0;
  font-size: calc(56 * var(--lp-cta-u));
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--lp-white);
}

.lp-cta__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: calc(10 * var(--lp-cta-u));
}

.lp-cta__text {
  margin: 0;
  font-size: calc(13 * var(--lp-cta-u));
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: calc(-.36 * var(--lp-cta-u));
  color: var(--lp-white);
}

.lp-cta .lp-cta__btn {
  --lp-btn-h: calc(40 * var(--lp-cta-u));
  --lp-btn-px: 0px;
  --lp-btn-fs: calc(13 * var(--lp-cta-u));
  --lp-btn-r: calc(25 * var(--lp-cta-u));
  width: calc(144 * var(--lp-cta-u));
  margin-top: calc(95.4 * var(--lp-cta-u));
  line-height: 2;
  letter-spacing: calc(-.5 * var(--lp-cta-u));
}

/* ---------- decorations ---------- */
.lp-cta__orb,
.lp-cta__ring {
  position: absolute;
  pointer-events: none;
}
.lp-cta__orb {
  left: calc(-33 * var(--lp-cta-u));
  top: calc(6 * var(--lp-cta-u));
  width: calc(84 * var(--lp-cta-u));
  height: auto;
}
.lp-cta__ring {
  left: calc(924 * var(--lp-cta-u));
  top: calc(219 * var(--lp-cta-u));
  width: calc(320 * var(--lp-cta-u));
}
.lp-cta__ring svg { width: 100%; height: auto; display: block; }

/* ============================================================
   960 grid (max-width: 1199px)
   The original overflows its plate here — the skin forces the 56px headline
   onto a card sized for 42px. We keep the type and let the plate grow.
   ============================================================ */
@media (max-width: 1199px) {
  .lp-cta { --lp-cta-u: calc(100vw / 960); }
  .lp-cta__inner { padding: calc(59 * var(--lp-cta-u)) 0 calc(52 * var(--lp-cta-u)); }
  .lp-cta__card {
    grid-template-columns: calc(455 * var(--lp-cta-u)) calc(264 * var(--lp-cta-u));
    column-gap: calc(74 * var(--lp-cta-u));
    width: calc(860 * var(--lp-cta-u));
    min-height: calc(396 * var(--lp-cta-u));
    margin-left: calc(50 * var(--lp-cta-u));
    padding:
      calc(71 * var(--lp-cta-u)) calc(27 * var(--lp-cta-u))
      calc(40 * var(--lp-cta-u)) calc(40 * var(--lp-cta-u));
  }
  .lp-cta__aside { padding-top: 0; }
  .lp-cta .lp-cta__btn {
    --lp-btn-h: calc(32 * var(--lp-cta-u));
    --lp-btn-fs: max(12px, calc(10 * var(--lp-cta-u)));   /* same 12px floor as the 640 grid — 10 artboard px is 10px at 960 */
    width: max(calc(112 * var(--lp-cta-u)), 11.2em);
    margin-top: calc(70.4 * var(--lp-cta-u));
    letter-spacing: 0;
  }
}

/* ============================================================
   640 grid (max-width: 959px) — stacked, cyan plate with the bottom-right notch
   ============================================================ */
@media (max-width: 959px) {
  .lp-cta { --lp-cta-u: calc(100vw / 640); }
  .lp-cta__inner { padding: calc(59 * var(--lp-cta-u)) 0 calc(38 * var(--lp-cta-u)); }
  .lp-cta__card {
    display: block;
    width: calc(600 * var(--lp-cta-u));
    min-height: calc(400 * var(--lp-cta-u));
    margin-left: calc(19 * var(--lp-cta-u));
    padding:
      calc(47 * var(--lp-cta-u)) calc(101 * var(--lp-cta-u))
      calc(87 * var(--lp-cta-u)) calc(48 * var(--lp-cta-u));
    border-radius: calc(25 * var(--lp-cta-u));
    background-image: url(../assets/cta/card-tablet.svg);
  }
  .lp-cta__title { font-size: calc(40 * var(--lp-cta-u)); }
  /* The 640 artboard puts body copy at 10 of its own pixels, which lands at a
     literal 10px on a 640-wide phone in landscape. Floor it at 12px: above
     768 the artboard value is already larger, so the scaling is untouched and
     the two expressions meet continuously at 768. The boxes that carry the
     copy are floored the same way (`Npx of the artboard` = `N/10 em` at the
     artboard size), so a floored size keeps its line count and the plate's
     height instead of growing. */
  .lp-cta__text {
    max-width: max(calc(291 * var(--lp-cta-u)), 29.1em);
    margin-top: calc(15.6 * var(--lp-cta-u));
    font-size: max(12px, calc(10 * var(--lp-cta-u)));
  }
  .lp-cta .lp-cta__btn {
    --lp-btn-h: calc(42 * var(--lp-cta-u));
    --lp-btn-fs: max(12px, calc(10 * var(--lp-cta-u)));
    width: max(calc(143 * var(--lp-cta-u)), 14.3em);
    margin-top: calc(58 * var(--lp-cta-u));
  }
  .lp-cta__orb { left: calc(-33 * var(--lp-cta-u)); top: calc(-25 * var(--lp-cta-u)); }
  .lp-cta__ring {
    left: calc(490 * var(--lp-cta-u));
    top: calc(297 * var(--lp-cta-u));
    width: calc(220 * var(--lp-cta-u));
  }
}

/* ============================================================
   320 grid (max-width: 639px) — tall cyan plate with the notched top-left tab
   ============================================================ */
@media (max-width: 639px) {
  .lp-cta { --lp-cta-u: calc(100vw / 320); }
  .lp-cta__inner { padding: calc(7 * var(--lp-cta-u)) 0 calc(13 * var(--lp-cta-u)); }
  .lp-cta__card {
    width: calc(300 * var(--lp-cta-u));
    min-height: calc(456 * var(--lp-cta-u));
    margin-left: calc(10 * var(--lp-cta-u));
    padding:
      calc(81 * var(--lp-cta-u)) calc(15 * var(--lp-cta-u))
      calc(46 * var(--lp-cta-u)) calc(30 * var(--lp-cta-u));
    border-radius: 0;                         /* the shape carries its own corners */
    background-image: url(../assets/cta/card-mobile.svg);
  }
  .lp-cta__title { font-size: calc(27 * var(--lp-cta-u)); }
  .lp-cta__text {
    max-width: calc(254 * var(--lp-cta-u));
    margin-top: calc(98.8 * var(--lp-cta-u));
  }
  .lp-cta .lp-cta__btn {
    --lp-btn-h: calc(39 * var(--lp-cta-u));
    width: max(calc(126 * var(--lp-cta-u)), 12.6em);   /* same guard: the pill never gets narrower than its nowrap label */
    margin-top: calc(53 * var(--lp-cta-u));
  }
  .lp-cta__orb { left: calc(-32 * var(--lp-cta-u)); top: calc(-111 * var(--lp-cta-u)); }
  .lp-cta__ring {
    left: calc(186 * var(--lp-cta-u));
    top: calc(362 * var(--lp-cta-u));
    width: calc(194 * var(--lp-cta-u));
  }
}

/* ---- 09-contact.css ---- */
/* ============================================================
   09 — Contacto «Cuéntanos qué vendes» (original record rec2489483781)

   The original is a Tilda "zero block": four fixed artboards (1200 / 960 /
   640 / 320) whose contents are absolutely positioned and whose whole box is
   scaled to the viewport. Same model as the hero: `--lp-contact-u` is one
   artboard unit, every measurement below is the artboard number taken from
   S/spec/css/rec2489483781.css, and the composition scales with the viewport.
   Growth stops at 1440px, where the page background takes over on both sides.

   Only the four decorative pieces (card silhouette, telegram orb) are
   absolutely positioned as a composition; the form itself is normal flow —
   a flex column of rows, so the fields stay real, labelled controls.

   Artboard heights: 849 / 790 / 815 / 1310 units.
   ============================================================ */

.lp-contact {
  position: relative;
  z-index: 10;            /* #rec2489483781 .t396__artboard{z-index:10} — the card and the
                             form stay above the footer artwork, which bleeds 208u upwards */
  /* no background here on purpose: body paints --lp-bg, and an opaque fill would hide
     the footer panel's upward overhang that the original shows behind this section */
  color: var(--lp-text);
}
.lp-contact__inner {
  container-type: inline-size;
  max-width: 1440px;
  margin: 0 auto;
}
.lp-contact__stage {
  --lp-contact-u: calc(100cqw / 1200);   /* one artboard unit */
  --u: var(--lp-contact-u);
  --lp-contact-card: url(../assets/contact/card-1200.svg);
  --lp-contact-card-x: 50;
  --lp-contact-card-y: 48;
  --lp-contact-card-w: 1100;
  --lp-contact-card-h: 842.9;
  position: relative;
  display: flow-root;                    /* the form is an in-flow child: no margin collapse */
  min-height: calc(849 * var(--u));      /* artboard height — a floor, not a cap, so the
                                            validation error can grow the section */
  padding-bottom: calc(8 * var(--u));    /* breathing room under a grown form */
}

/* the card silhouette (gradient artwork with the Tilda "notches") */
.lp-contact__stage::before {
  content: "";
  position: absolute;
  left: calc(var(--lp-contact-card-x) * var(--u));
  top: calc(var(--lp-contact-card-y) * var(--u));
  width: calc(var(--lp-contact-card-w) * var(--u));
  height: calc(var(--lp-contact-card-h) * var(--u));
  background: var(--lp-contact-card) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

/* every direct child is an artboard box: --x/--y/--w in artboard units */
.lp-contact__stage > * {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  margin: 0;
}

/* ---------- decorative 3D telegram orbs ----------
   The original carries two copies of the same glossy disc. The big one sits on
   the right edge of the form on every artboard (`.lp-contact__orb`, painted after
   the form so it laps over its right column); the small one only enters the 320
   artboard, where it rides the top-left corner (`.lp-contact__badge` — on the
   wider grids its box is parked far off to the right, i.e. hidden).
   Tilda animates both with a scroll parallax (`data-animate-prx`); like the
   08-cta ring we ship them static, at the artboard position the parallax is
   anchored to (`data-field-top/left/width` in S/spec/raw/rec2489483781.html).
   On the 640 and 320 artboards the big orb hangs past the right edge of the
   artboard; the original cuts it off at its page wrapper (`.t-records` carries
   `overflow:clip`), so it gets a clip box of its own here — the stage itself
   cannot clip, because the card artwork deliberately bleeds below it. */
.lp-contact__orb-clip {
  --x: 0; --y: 0;
  width: 100%;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
}
.lp-contact__orb {
  position: absolute;
  left: calc(var(--ox) * var(--u));
  top: calc(var(--oy) * var(--u));
  width: calc(var(--ow) * var(--u));
  height: auto;
  --ox: 923; --oy: 432; --ow: 259;
}
.lp-contact__badge {
  --x: 74; --y: 0; --w: 131;
  display: none;
  height: auto;
  pointer-events: none;
}

/* ---------- Two-tone display title ----------
   Two independent artboard boxes at ≥640: the teal line is indented and sits
   above the dark line, which overlaps it by 10 units. */
.lp-contact__title {
  --x: 95; --y: 132; --w: 975;
  height: calc(116 * var(--u));
  font-weight: 500;
}
.lp-contact__title-line {
  position: absolute;
  display: block;
  font-size: calc(70 * var(--u));
  line-height: calc(63 * var(--u));
  letter-spacing: calc(-4.2 * var(--u));
}
.lp-contact__title-line--teal {
  left: calc(143 * var(--u));
  top: 0;
  width: calc(832 * var(--u));
  color: var(--lp-teal-600);
}
.lp-contact__title-line--dark {
  left: 0;
  top: calc(53 * var(--u));
  width: calc(786 * var(--u));
  color: var(--lp-text);
}

/* ---------- Lead ---------- */
.lp-contact__lead {
  --x: 445; --y: 265; --w: 319;
  font-size: calc(14 * var(--u));
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: calc(-0.56 * var(--u));
  color: var(--lp-text);
}

/* ---------- «*Respondemos sin compromiso» ---------- */
.lp-contact__note {
  --x: 221; --y: 826; --w: 560;
  display: flex;
  align-items: center;          /* the original box is taller than the text and centres it */
  height: calc(14 * var(--u));
  /* 12px body-copy floor: the artboard value only reaches 12px at 1440, so every
     narrower viewport would print this note at 10…11px */
  font-size: max(12px, calc(10 * var(--u)));
  font-weight: 500;
  line-height: 1.4;
  color: var(--lp-text-muted);
  opacity: .5;
}

/* ============================================================
   Form — base primitives from 01-base.css, re-scaled to artboard units.
   Original metrics: field 40u tall, 8u radius, 12u text, 20u side padding,
   10u vertical rhythm, 15u column gap, submit 103×40u pill.
   ============================================================ */
.lp-contact__form {
  --x: 95; --y: 355; --w: 785;
  /* in flow (still positioned, so it paints above the card artwork): its height is what
     makes the stage grow when the inline error appears */
  position: relative;
  left: auto;
  top: auto;
  margin: calc(var(--y) * var(--u)) 0 0 calc(var(--x) * var(--u));
  --lp-field-h:     calc(40 * var(--u));
  --lp-field-fs:    calc(12 * var(--u));
  --lp-field-lh:    1.33;
  --lp-field-px:    calc(20 * var(--u));
  --lp-field-r:     calc(8 * var(--u));
  --lp-field-pt:    calc(10 * var(--u));
  --lp-textarea-h:  calc(60 * var(--u));
  --lp-field-gap-x: calc(15 * var(--u));
  --lp-field-gap-y: calc(10 * var(--u));
  --lp-contact-legend-fs: calc(16 * var(--u));
  --lp-contact-submit-h:  calc(40 * var(--u));
}

.lp-contact .lp-input,
.lp-contact .lp-select,
.lp-contact .lp-textarea {
  height: var(--lp-field-h);
}
.lp-contact .lp-textarea {
  height: var(--lp-textarea-h);
  resize: none;
}
/* the original leaves the placeholders at the UA's 50% tint, not full ink */
.lp-contact .lp-input::placeholder,
.lp-contact .lp-textarea::placeholder,
.lp-contact .lp-phone__input::placeholder { opacity: .5; }
.lp-contact .lp-select {
  padding-right: calc(45 * var(--u));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%236a7682'/%3E%3C/svg%3E");
  background-size: calc(10 * var(--u)) calc(6 * var(--u));
  background-position: right calc(20 * var(--u)) center;
}

/* phone field: flag + caret + static «+34» prefix, all inside the white box */
.lp-contact .lp-phone { gap: calc(6 * var(--u)); }
.lp-contact__flag {
  flex: 0 0 auto;
  width: calc(18 * var(--u));
  height: calc(13 * var(--u));
  border-radius: calc(1 * var(--u));
  box-shadow: 0 0 calc(5 * var(--u)) rgba(0, 0, 0, .3);
}
.lp-contact__caret {
  flex: 0 0 auto;
  width: calc(6.67 * var(--u));
  height: calc(5 * var(--u));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%239a9a9a'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.lp-contact .lp-phone__code  { margin-left: calc(4 * var(--u)); }
.lp-contact .lp-phone__input { align-self: stretch; }

/* checkbox group «Que necesitas?» */
.lp-contact__needs {
  margin-top: calc(15 * var(--u));
  margin-bottom: calc(10 * var(--u));
}
.lp-contact__legend {
  display: block;
  width: 100%;
  padding: 0 calc(10 * var(--u)) calc(5 * var(--u)) 0;
  font-size: var(--lp-contact-legend-fs);
  line-height: 1.5;
}
.lp-contact__needs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: calc(10 * var(--u));
  column-gap: calc(15 * var(--u));
  row-gap: calc(20 * var(--u));
}

.lp-contact .lp-checkbox {
  --lp-check-size: calc(20 * var(--u));
  --lp-check-bw: 2px;
  gap: calc(10 * var(--u));
  padding-top: 0;                 /* the original keeps the box flush with the row top */
  align-items: flex-start;
  font-size: calc(12 * var(--u));
  line-height: 1.2;
}
.lp-contact .lp-checkbox__text {
  min-width: 0;
  padding-top: calc(2.8 * var(--u));
  overflow-wrap: anywhere;        /* the 320 artboard squeezes 3 columns into 240u */
}
.lp-contact .lp-checkbox a { border-bottom-width: 1px; }

/* consent pair sits on one row, like every other 50/50 row */
.lp-contact__consents { align-items: flex-start; }

/* submit + messages */
.lp-contact .lp-form__submit { margin-top: calc(10 * var(--u)); }
.lp-contact .lp-submit {
  --lp-btn-h: var(--lp-contact-submit-h);
  --lp-btn-px: calc(15 * var(--u));
  --lp-btn-fs: calc(12 * var(--u));
  --lp-btn-r: calc(50 * var(--u));
  width: calc(103 * var(--u));
}
.lp-contact .lp-form__error,
.lp-contact .lp-form__success { font-size: calc(12 * var(--u)); }
/* the error follows the submit row, and clears the «*Respondemos sin compromiso»
   note, which is anchored to the artboard rather than to the form */
.lp-contact .lp-form__error { margin-top: 0; }

/* keyboard focus parity: the phone box owns the ring for its inner input */
.lp-contact .lp-phone:focus-within:not(.is-invalid) {
  box-shadow: 0 0 0 2px var(--lp-teal-500);
}

/* ============================================================
   960 artboard — viewport 960…1199
   ============================================================ */
@media (max-width: 1199px) {
  .lp-contact__stage {
    --lp-contact-u: calc(100cqw / 960);
    --lp-contact-card: url(../assets/contact/card-960.svg);
    --lp-contact-card-w: 860;
    --lp-contact-card-h: 728.7;
    min-height: calc(790 * var(--u));
  }
  .lp-contact__title      { --x: 100; --y: 110; --w: 683; height: calc(76 * var(--u)); }
  .lp-contact__title-line { font-size: calc(40 * var(--u)); line-height: calc(36 * var(--u)); letter-spacing: calc(-2 * var(--u)); }
  .lp-contact__title-line--teal { left: calc(87 * var(--u)); width: calc(596 * var(--u)); }
  .lp-contact__title-line--dark { top: calc(33 * var(--u)); width: calc(596 * var(--u)); }
  /* 12px body-copy floor — the 10u artboard value is 10px at 960 and never
     reaches 12px before 1152; the same floor carries into the 640 and 320 blocks */
  .lp-contact__lead { --x: 658; --y: 153; --w: 201; font-size: max(12px, calc(10 * var(--u))); letter-spacing: 0; }
  .lp-contact__form { --x: 100; --y: 245; --w: 709; }
  .lp-contact__orb  { --ox: 809; --oy: 415; --ow: 151; }
  .lp-contact__note { --x: 220; --y: 718; --w: 216; height: calc(19 * var(--u)); }

  /* ---- touch targets (every viewport below the desktop artboard can be a
     touch screen) ----
     The artboard row is only 20u tall with a 20u gap between rows. Spending the
     gap as row padding instead makes the whole <label> a 40u (≥40px) tap target
     while the rhythm between rows — and the artboard's height — stays put. */
  .lp-contact__needs-grid { row-gap: 0; margin-top: 0; }
  .lp-contact__needs-grid .lp-checkbox { padding-block: calc(10 * var(--u)); }
  /* the row padding now supplies the 10u the grid's own margins used to add, so
     the group keeps exactly the height and rhythm it has on the artboard */
  .lp-contact__needs { margin-bottom: 0; }
  /* the two consent rows live outside that grid and are only two lines tall on
     the 960 artboard — pad them to the same floor (min-height would replace the
     flex `min-height:auto` these rows rely on once they stack) */
  .lp-contact__consents .lp-checkbox { padding-block: calc(4 * var(--u)); }
}

/* ============================================================
   640 artboard — viewport 640…959
   ============================================================ */
@media (max-width: 959px) {
  .lp-contact__stage {
    --lp-contact-u: calc(100cqw / 640);
    --lp-contact-card: url(../assets/contact/card-640.svg);
    --lp-contact-card-x: 10;
    --lp-contact-card-y: 45;
    --lp-contact-card-w: 620;
    --lp-contact-card-h: 770;
    min-height: calc(815 * var(--u));
  }
  .lp-contact__title      { --x: 40; --y: 115; --w: 490; height: calc(70 * var(--u)); }
  .lp-contact__title-line { font-size: calc(36 * var(--u)); line-height: calc(32 * var(--u)); }
  .lp-contact__title-line--teal { left: calc(73 * var(--u)); width: calc(417 * var(--u)); }
  .lp-contact__title-line--dark { top: calc(32 * var(--u)); width: calc(387 * var(--u)); }
  .lp-contact__lead { --x: 325; --y: 199; --w: 266; }
  .lp-contact__form {
    --x: 40; --y: 269; --w: 531;
    --lp-contact-legend-fs: calc(12 * var(--u));
    /* 16px floor: iOS Safari zooms the whole page on focus for any field under
       16px and leaves it zoomed and pannable. The field BOX keeps its artboard
       height (40u), only the type stops shrinking. Carries into the 320 block. */
    --lp-field-fs: max(16px, calc(12 * var(--u)));
    /* 40px touch floor on the pill; the artboard value wins again from ~883px up */
    --lp-contact-submit-h: max(40px, calc(29 * var(--u)));
  }
  /* the 640 artboard keeps the 960 width and only re-anchors the orb; its right
     half runs past the artboard edge exactly as in the original */
  .lp-contact__orb  { --ox: 579; --oy: 369; --ow: 151; }
  .lp-contact__note { --x: 167; --y: 761; --w: 216; height: calc(19 * var(--u)); }
  .lp-contact .lp-form__error { margin-top: calc(12 * var(--u)); }
  /* from 640 down the consent copy already wraps to three or four lines, so the
     960-artboard padding above would only add slack */
  .lp-contact__consents .lp-checkbox { padding-block: 0; }
}

/* ============================================================
   320 artboard — viewport ≤ 639
   ============================================================ */
@media (max-width: 639px) {
  .lp-contact__stage {
    --lp-contact-u: calc(100cqw / 320);
    --lp-contact-card: url(../assets/contact/card-320.svg);
    --lp-contact-card-y: 48;
    --lp-contact-card-w: 300;
    --lp-contact-card-h: 1286;
    min-height: calc(1310 * var(--u));
  }
  .lp-contact__badge { display: block; }

  /* one flowing heading: the teal opening runs into the dark closing */
  .lp-contact__title {
    --x: 40; --y: 157; --w: 228;
    height: auto;
    font-size: calc(26 * var(--u));
    line-height: calc(23 * var(--u));
    letter-spacing: calc(-1 * var(--u));
    color: var(--lp-teal-600);
  }
  .lp-contact__title-line {
    position: static;
    display: inline;
    width: auto;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
  }
  .lp-contact__title-line--dark { color: var(--lp-teal-900); }

  /* the lead starts 14u higher than the artboard says: the 12px floor turns it
     into a four-line paragraph on a 320-wide phone, and the artboard only left
     62u between it and the form's first field */
  .lp-contact__lead { --x: 40; --y: 255; --w: 241; text-align: left; }
  .lp-contact__form { --x: 40; --y: 331; --w: 240; }
  .lp-contact__orb  { --ox: 230; --oy: 832; --ow: 168; }
  .lp-contact__note { --x: 160; --y: 1265; --w: 110; height: calc(38 * var(--u)); }

  /* One column for the whole 320 artboard, not just below 480.
     The artboard is 320u wide however wide the viewport is, so the 50/50 rows
     and the 3-column checkbox grid do not become roomier between 480 and 639:
     the phone input was left with ~4px of usable width (its flag + caret +
     «+34» chrome is fixed in the same unit as the column) and every checkbox
     label was broken mid-word. Both are geometry, not viewport, so the whole
     band gets the single column the narrow phones already had. */
  .lp-contact .lp-form__row {
    flex-direction: column;
    /* the wrap is what puts two fields side by side in the row direction; as a
       column it would instead let a field's intrinsic width (an <input> is ~20
       characters wide, i.e. wider than the 240u artboard column once the type
       is floored at 16px) size the flex line and spill past the artboard */
    flex-wrap: nowrap;
  }
  .lp-contact__needs-grid { grid-template-columns: minmax(0, 1fr); }
  /* one column makes the form tall enough for the submit row to reach the note's
     band (note 1265…1303u, submit ends ~1275u), so the inline error is pushed
     clear of it instead of printing through it */
  .lp-contact .lp-form__error { margin-top: calc(24 * var(--u)); }
  /* «Como te contactamos?» needs two lines inside a 240u control once the type
     is floored at 16px, so the pill grows with its label instead of clipping the
     question (the 40u artboard height stays as the min via 01-base) */
  .lp-contact .lp-select { height: auto; }
  /* the decorative orb is painted after the form and laps its right edge; the
     consent copy the visitor has to agree to always stays readable above it */
  .lp-contact__consents { position: relative; z-index: 1; }
}

/* ---- 10-footer.css ---- */
/* ============================================================
   10 — Footer (rec728721618)
   Original: Tilda zero-block (T396) whose artboard (1200 / 960 / 640 /
   480 / 320 grid px) is zoomed to the viewport — geometry *and* type.
   Same model here: --lp-f-u is "one artboard pixel", every length below
   is written in artboard px, so each breakpoint reproduces its artboard
   and stays fluid in between.
   The teal panel deliberately overhangs the top of the section by 170
   artboard px (it slides up behind the contact block, as in the
   original); .lp-footer is a flow-root so that margin cannot escape.
   ============================================================ */
.lp-footer {
  --lp-f-u: min(calc(100vw / 1200), 1.2px);
  position: relative;
  display: flow-root;
  padding-bottom: calc(18 * var(--lp-f-u));
  background: linear-gradient(0deg, #ffffff 51%, #e8fbfe 100%);
}
/* the base focus ring is teal — invisible on the teal panel */
.lp-footer__panel :focus-visible { outline-color: var(--lp-white); }

/* ---------- Panel (the big rounded teal card) ---------- */
.lp-footer__panel {
  position: relative;
  width: calc(1160 * var(--lp-f-u));
  margin: calc(-170 * var(--lp-f-u)) auto 0;
  padding: calc(200 * var(--lp-f-u)) calc(59 * var(--lp-f-u)) calc(22 * var(--lp-f-u)) calc(75 * var(--lp-f-u));
  border-radius: 30px;
  background: linear-gradient(40deg, #0c5b63 0%, #1f9aa6 100%);
  color: var(--lp-white);
  overflow: hidden;
}
/* blurred light streak baked into the original artwork */
.lp-footer__glow {
  position: absolute;
  max-width: none;
  pointer-events: none;
}
.lp-footer__glow--desktop { left: 0; top: calc(-3 * var(--lp-f-u)); width: calc(1126 * var(--lp-f-u)); height: calc(735 * var(--lp-f-u)); }
.lp-footer__glow--mobile  { display: none; }

/* white tab bridging the card and the page below it */
.lp-footer__notch {
  position: absolute;
  left: 50%;
  bottom: calc(1 * var(--lp-f-u));
  transform: translateX(-50%);
  width: calc(296 * var(--lp-f-u));
  height: calc(66 * var(--lp-f-u));
  max-width: none;
  pointer-events: none;
}

/* ---------- Grid: logo + tiles on top, two columns below ---------- */
.lp-footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: calc(416 * var(--lp-f-u)) calc(610 * var(--lp-f-u));
}
.lp-footer__inner > * { min-width: 0; }

.lp-footer__logo {
  grid-column: 1; grid-row: 1;
  justify-self: start;
  align-self: start;
  margin-top: calc(77 * var(--lp-f-u));
}
.lp-footer__logo img { width: calc(250 * var(--lp-f-u)); height: auto; max-width: none; }

.lp-footer__col--info    { grid-column: 1; grid-row: 2; margin-top: calc(20 * var(--lp-f-u)); }
.lp-footer__col--contact {
  grid-column: 2; grid-row: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
}

/* ---------- Contact tiles ---------- */
.lp-footer__tiles {
  grid-column: 2; grid-row: 1;
  display: flex;
  align-items: flex-start;
  gap: calc(15 * var(--lp-f-u));
  padding-top: calc(25 * var(--lp-f-u));
}
.lp-footer__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 0 0 calc(292 * var(--lp-f-u));
  height: calc(183 * var(--lp-f-u));
  padding: calc(25 * var(--lp-f-u));
  border-radius: var(--lp-r-sm);
  background: linear-gradient(140deg, rgba(154, 205, 255, .21) 0%, rgba(178, 242, 251, .2) 100%);
}
.lp-footer__tile--mail { margin-top: calc(43 * var(--lp-f-u)); }
.lp-footer__tile-icon {
  position: absolute;
  top: calc(-25 * var(--lp-f-u));
  right: calc(25 * var(--lp-f-u));
  width: calc(72 * var(--lp-f-u));
  height: calc(72 * var(--lp-f-u));
  max-width: none;
}
/* 12px body-copy floor: from 1199 down to 960 the 1200-artboard unit shrinks
   the small copy to 9.6–12px, so every rule below max()es against 12px. The
   floor is a no-op at 1200 and above (the unit is >= 1px there) and is
   superseded by the 640/480/320 artboards under 959. */
.lp-footer__tile-label {
  font-size: max(12px, calc(13 * var(--lp-f-u)));
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: calc(-.5 * var(--lp-f-u));
  color: var(--lp-mint-100);
  opacity: .87;
}
.lp-footer__tile-value {
  font-size: calc(25 * var(--lp-f-u));
  font-weight: 500;
  line-height: .9;
  letter-spacing: calc(-1 * var(--lp-f-u));
}
.lp-footer__tile--mail .lp-footer__tile-value { font-size: calc(22 * var(--lp-f-u)); }
.lp-footer__tile-value a { opacity: .87; }

/* ---------- Addresses ---------- */
.lp-footer__addr { display: grid; grid-template-columns: calc(153 * var(--lp-f-u)) auto; }
.lp-footer__addr + .lp-footer__addr { margin-top: calc(24.8 * var(--lp-f-u)); }
.lp-footer__addr-city {
  font-size: max(12px, calc(14 * var(--lp-f-u)));
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: calc(-.56 * var(--lp-f-u));
}
.lp-footer__addr-text {
  max-width: calc(267 * var(--lp-f-u));
  font-size: max(12px, calc(14 * var(--lp-f-u)));
  font-style: normal;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: calc(-.5 * var(--lp-f-u));
  opacity: .6;
}
.lp-footer__addr--alicante .lp-footer__addr-text { max-width: calc(189 * var(--lp-f-u)); }

/* ---------- Registered address + NIE + copyright ---------- */
.lp-footer__legalinfo {
  display: flex;
  flex-direction: column;
  margin-top: calc(32.2 * var(--lp-f-u));
}
.lp-footer__address-line {
  max-width: calc(342 * var(--lp-f-u));
  font-size: max(12px, calc(12 * var(--lp-f-u)));
  font-style: normal;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: calc(-.5 * var(--lp-f-u));
  color: var(--lp-aqua-3);
}
.lp-footer__address-line span { color: var(--lp-white); }
.lp-footer__nie {
  margin-top: calc(23.8 * var(--lp-f-u));
  font-size: max(12px, calc(12 * var(--lp-f-u)));
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: calc(-.5 * var(--lp-f-u));
  color: var(--lp-aqua-3);
}
.lp-footer__copy {
  margin-top: calc(11.8 * var(--lp-f-u));
  font-size: max(12px, calc(12 * var(--lp-f-u)));
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: calc(-.5 * var(--lp-f-u));
  opacity: .6;
}

/* ---------- Social tiles (3D icons) ---------- */
.lp-footer__social {
  display: grid;
  grid-template-columns: repeat(2, calc(67 * var(--lp-f-u)));
  column-gap: calc(10 * var(--lp-f-u));
  row-gap: calc(10 * var(--lp-f-u));
  width: calc(144 * var(--lp-f-u));
  margin-top: calc(-14 * var(--lp-f-u));
  margin-left: calc(118 * var(--lp-f-u));
}
.lp-footer__social-item--fb { grid-column: 1; grid-row: 1; }
.lp-footer__social-item--wa { grid-column: 1; grid-row: 2; }
.lp-footer__social-item--tg {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: start;
  margin-top: calc(47 * var(--lp-f-u));
}
.lp-footer__social a { display: block; }
.lp-footer__social img { width: calc(67 * var(--lp-f-u)); height: calc(67 * var(--lp-f-u)); max-width: none; }

/* ---------- Link columns ---------- */
.lp-footer__nav {
  display: grid;
  grid-template-columns: calc(150 * var(--lp-f-u)) auto;
  margin-top: calc(35 * var(--lp-f-u));
  margin-left: calc(97 * var(--lp-f-u));
}
.lp-footer__nav li {
  height: calc(30 * var(--lp-f-u));
  font-size: max(12px, calc(14 * var(--lp-f-u)));
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: calc(-.5 * var(--lp-f-u));
  text-transform: lowercase;
}
.lp-footer__nav li:last-child { height: auto; }

/* ---------- Legal column ---------- */
.lp-footer__legal {
  grid-column: 1 / -1;
  margin-top: calc(17.6 * var(--lp-f-u));
  text-align: right;
}
.lp-footer__legal-note {
  height: calc(22 * var(--lp-f-u));
  font-size: max(12px, calc(12 * var(--lp-f-u)));
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: calc(-.5 * var(--lp-f-u));
  opacity: .6;
}
.lp-footer__legal-links li {
  height: calc(22 * var(--lp-f-u));
  font-size: max(12px, calc(12 * var(--lp-f-u)));
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: calc(-.5 * var(--lp-f-u));
  color: var(--lp-mint-100);
}
.lp-footer__legal-links li:last-child { height: auto; }
.lp-footer__legal-links a { transition: color var(--lp-dur-fast) ease-in-out; }
.lp-footer__legal-links a:hover,
.lp-footer__legal-links a:focus-visible { color: var(--lp-white); }

/* ============================================================
   1199 — 960 : the original switches to its 960 artboard here. The
   panel, tiles, notch and text columns land in the same place under
   the 1200-grid unit above, but a handful of measurements genuinely
   differ between the two artboards — the logo (bigger and higher), the
   social cluster (x, icon size, row pitch), both link-column x's and the
   legal block's row pitch. --lp-f-u9 is "one 960-grid pixel"; only
   those are restated in it.
   ============================================================ */
@media (max-width: 1199px) {
  .lp-footer { --lp-f-u9: calc(100vw / 960); }
  .lp-footer__panel { padding-bottom: calc(9 * var(--lp-f-u9)); }
  .lp-footer__logo { margin-top: calc(30 * var(--lp-f-u9)); }
  .lp-footer__logo img { width: calc(250 * var(--lp-f-u9)); }
  .lp-footer__social {
    grid-template-columns: repeat(2, calc(50 * var(--lp-f-u9)));
    column-gap: calc(10 * var(--lp-f-u9));
    row-gap: calc(21 * var(--lp-f-u9));
    margin-left: calc(124.5 * var(--lp-f-u9));
  }
  .lp-footer__social img { width: calc(50 * var(--lp-f-u9)); height: calc(50 * var(--lp-f-u9)); }
  .lp-footer__social-item--tg { margin-top: calc(40 * var(--lp-f-u9)); }
  .lp-footer__nav {
    grid-template-columns: calc(99.5 * var(--lp-f-u9)) auto;
    margin-left: calc(62 * var(--lp-f-u9));
  }
  .lp-footer__legal { margin-top: calc(8 * var(--lp-f-u9)); }
  .lp-footer__legal-note,
  .lp-footer__legal-links li { height: calc(21 * var(--lp-f-u9)); }
}

/* ============================================================
   959 — 640 : 640 artboard — logo, then both tiles across the whole
   card, then addresses (left) / social + links + legal (right)
   ============================================================ */
@media (max-width: 959px) {
  .lp-footer {
    --lp-f-u: calc(100vw / 640);
    padding-bottom: 0;
  }
  .lp-footer__panel {
    width: 100%;
    margin-top: calc(-186 * var(--lp-f-u));
    padding: calc(251 * var(--lp-f-u)) calc(29 * var(--lp-f-u)) calc(20 * var(--lp-f-u)) calc(30 * var(--lp-f-u));
    border-radius: 0;
  }
  .lp-footer__glow--desktop {
    left: calc(-526 * var(--lp-f-u));
    top: calc(4 * var(--lp-f-u));
    width: calc(1165 * var(--lp-f-u));
    height: calc(761 * var(--lp-f-u));
  }
  .lp-footer__notch { display: none; }

  .lp-footer__inner { grid-template-columns: calc(300 * var(--lp-f-u)) 1fr; }
  .lp-footer__logo { margin-top: 0; }
  .lp-footer__logo img { width: calc(250 * var(--lp-f-u)); }

  .lp-footer__tiles {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: calc(-53 * var(--lp-f-u));
    gap: calc(20 * var(--lp-f-u));
    padding-top: calc(27 * var(--lp-f-u));
  }
  .lp-footer__tile {
    flex: 0 0 calc(280 * var(--lp-f-u));
    height: calc(145 * var(--lp-f-u));
    padding: calc(15 * var(--lp-f-u));
  }
  .lp-footer__tile--call { margin-top: calc(57 * var(--lp-f-u)); }
  .lp-footer__tile--mail { margin-top: 0; }
  .lp-footer__tile-icon {
    top: calc(-27 * var(--lp-f-u));
    right: calc(17 * var(--lp-f-u));
    width: calc(60 * var(--lp-f-u));
    height: calc(60 * var(--lp-f-u));
  }
  .lp-footer__tile-label { font-size: max(12px, calc(10 * var(--lp-f-u))); letter-spacing: normal; }
  .lp-footer__tile-value,
  .lp-footer__tile--mail .lp-footer__tile-value { font-size: calc(21 * var(--lp-f-u)); }

  .lp-footer__col--info { grid-column: 1; grid-row: 3; margin-top: calc(40 * var(--lp-f-u)); }
  .lp-footer__col--contact { grid-column: 2; grid-row: 3; display: block; margin-top: calc(-28 * var(--lp-f-u)); }

  .lp-footer__addr { grid-template-columns: calc(125 * var(--lp-f-u)) auto; }
  .lp-footer__addr + .lp-footer__addr { margin-top: calc(24 * var(--lp-f-u)); }
  .lp-footer__addr-city { font-size: calc(12 * var(--lp-f-u)); }
  .lp-footer__addr-text {
    max-width: calc(148 * var(--lp-f-u));
    font-size: max(12px, calc(10 * var(--lp-f-u)));
    letter-spacing: normal;
  }
  .lp-footer__addr--alicante .lp-footer__addr-text { max-width: calc(153 * var(--lp-f-u)); }

  .lp-footer__legalinfo { margin-top: calc(23 * var(--lp-f-u)); }
  .lp-footer__address-line {
    max-width: calc(220 * var(--lp-f-u));
    font-size: max(12px, calc(10 * var(--lp-f-u)));
    letter-spacing: normal;
  }
  .lp-footer__nie {
    margin-top: calc(34 * var(--lp-f-u));
    font-size: max(12px, calc(10 * var(--lp-f-u)));
    letter-spacing: normal;
  }
  .lp-footer__copy {
    margin-top: calc(8 * var(--lp-f-u));
    font-size: max(12px, calc(10 * var(--lp-f-u)));
    letter-spacing: normal;
  }

  .lp-footer__social {
    grid-template-columns: repeat(3, calc(50 * var(--lp-f-u)));
    column-gap: calc(10 * var(--lp-f-u));
    row-gap: 0;
    width: calc(170 * var(--lp-f-u));
    margin-top: 0;
    margin-left: calc(20 * var(--lp-f-u));
  }
  .lp-footer__social-item--fb { grid-column: 1; grid-row: 1; }
  .lp-footer__social-item--tg { grid-column: 3; grid-row: 1; margin-top: 0; }
  .lp-footer__social-item--wa { grid-column: 2; grid-row: 2; margin-top: calc(-20 * var(--lp-f-u)); }
  .lp-footer__social img { width: calc(50 * var(--lp-f-u)); height: calc(50 * var(--lp-f-u)); }

  .lp-footer__nav {
    grid-template-columns: calc(105 * var(--lp-f-u)) auto;
    margin-top: calc(23 * var(--lp-f-u));
    margin-left: calc(80 * var(--lp-f-u));
  }
  .lp-footer__nav li {
    height: calc(23 * var(--lp-f-u));
    font-size: max(12px, calc(10 * var(--lp-f-u)));
    letter-spacing: normal;
  }

  .lp-footer__legal { margin-top: 0; }
  .lp-footer__legal-note,
  .lp-footer__legal-links li {
    height: calc(19 * var(--lp-f-u));
    font-size: max(12px, calc(10 * var(--lp-f-u)));
    letter-spacing: normal;
  }
}

/* ============================================================
   639 — 480 : 480 artboard — one column; social tiles top right,
   full-width contact tiles, link column beside the address block
   ============================================================ */
@media (max-width: 639px) {
  .lp-footer { --lp-f-u: calc(100vw / 480); }
  .lp-footer__panel {
    margin-top: calc(-86 * var(--lp-f-u));
    padding: calc(110 * var(--lp-f-u)) calc(20 * var(--lp-f-u)) calc(12 * var(--lp-f-u)) calc(20 * var(--lp-f-u));
  }
  .lp-footer__glow--desktop { left: calc(-651 * var(--lp-f-u)); top: calc(25 * var(--lp-f-u)); }

  .lp-footer__inner { grid-template-columns: calc(210 * var(--lp-f-u)) 1fr; }
  .lp-footer__col { display: contents; }
  .lp-footer__logo,
  .lp-footer__tiles,
  .lp-footer__addresses,
  .lp-footer__legalinfo,
  .lp-footer__copy,
  .lp-footer__social,
  .lp-footer__nav,
  .lp-footer__legal { grid-column: 1 / -1; grid-row: auto; }

  .lp-footer__social    { order: 1; }
  .lp-footer__logo      { order: 2; }
  .lp-footer__addresses { order: 3; }
  .lp-footer__tiles     { order: 4; }
  .lp-footer__nav       { order: 5; grid-column: 1; }
  .lp-footer__legalinfo { order: 6; grid-column: 2; }
  .lp-footer__legal     { order: 7; }
  .lp-footer__copy      { order: 8; }

  .lp-footer__social {
    grid-template-columns: repeat(2, calc(50 * var(--lp-f-u)));
    column-gap: calc(10 * var(--lp-f-u));
    row-gap: 0;
    width: calc(110 * var(--lp-f-u));
    /* the logo shares this band: pull the following rows up under the icons */
    margin: 0 0 calc(-112 * var(--lp-f-u));
    justify-self: end;
  }
  .lp-footer__social-item--tg { grid-column: 2; grid-row: 1; margin-top: 0; }
  .lp-footer__social-item--wa { grid-column: 1; grid-row: 1; margin-top: calc(30 * var(--lp-f-u)); }
  .lp-footer__social-item--fb { grid-column: 2; grid-row: 2; margin-top: calc(-7 * var(--lp-f-u)); }

  .lp-footer__addresses { margin-top: calc(16 * var(--lp-f-u)); }
  .lp-footer__addr { grid-template-columns: calc(125 * var(--lp-f-u)) auto; }
  .lp-footer__addr + .lp-footer__addr { margin-top: calc(14 * var(--lp-f-u)); }
  .lp-footer__addr-text { max-width: calc(189 * var(--lp-f-u)); }

  .lp-footer__tiles {
    flex-direction: column;
    margin-top: calc(39 * var(--lp-f-u));
    gap: calc(10 * var(--lp-f-u));
    padding-top: 0;
  }
  .lp-footer__tile {
    flex: 0 0 calc(105 * var(--lp-f-u));
    width: 100%;
    height: calc(105 * var(--lp-f-u));
  }
  .lp-footer__tile--call,
  .lp-footer__tile--mail { margin-top: 0; }
  .lp-footer__tile-icon {
    top: calc(15 * var(--lp-f-u));
    right: calc(15 * var(--lp-f-u));
    width: calc(50 * var(--lp-f-u));
    height: calc(50 * var(--lp-f-u));
  }

  .lp-footer__nav {
    grid-template-columns: calc(106 * var(--lp-f-u)) auto;
    margin: calc(28 * var(--lp-f-u)) 0 0;
  }

  .lp-footer__legalinfo { margin-top: calc(28 * var(--lp-f-u)); }
  .lp-footer__address-line { order: 2; margin-top: calc(9 * var(--lp-f-u)); }
  .lp-footer__nie { order: 1; margin-top: 0; }

  .lp-footer__legal { margin-top: calc(19 * var(--lp-f-u)); text-align: left; }
  .lp-footer__legal-note,
  .lp-footer__legal-links li { height: calc(21 * var(--lp-f-u)); }

  /* keep the copyright on the same 21u pitch as the legal rows above it
     (the last legal row is height:auto, so it needs its own top margin) */
  .lp-footer__copy { margin-top: calc(11 * var(--lp-f-u)); }
}

/* ============================================================
   ≤479 : 320 artboard — everything stacked in one column
   ============================================================ */
@media (max-width: 479px) {
  .lp-footer { --lp-f-u: calc(100vw / 320); }
  .lp-footer__panel {
    margin-top: calc(-86 * var(--lp-f-u));
    padding: calc(138 * var(--lp-f-u)) calc(20 * var(--lp-f-u)) calc(9 * var(--lp-f-u)) calc(20 * var(--lp-f-u));
  }
  .lp-footer__glow--desktop { display: none; }
  .lp-footer__glow--mobile {
    display: block;
    left: calc(-90 * var(--lp-f-u));
    top: calc(112 * var(--lp-f-u));
    width: calc(320 * var(--lp-f-u));
    height: calc(826 * var(--lp-f-u));
  }

  .lp-footer__inner { grid-template-columns: 1fr; }
  .lp-footer__nav,
  .lp-footer__legalinfo { grid-column: 1 / -1; }

  .lp-footer__social {
    grid-template-columns: repeat(2, calc(50 * var(--lp-f-u)));
    column-gap: calc(10 * var(--lp-f-u));
    row-gap: calc(12 * var(--lp-f-u));
    width: calc(110 * var(--lp-f-u));
    margin-bottom: calc(-44.75 * var(--lp-f-u));
  }
  .lp-footer__social-item--fb { grid-column: 1; grid-row: 1; margin-top: 0; }
  .lp-footer__social-item--wa { grid-column: 1; grid-row: 2; margin-top: 0; }
  .lp-footer__social-item--tg { grid-column: 2; grid-row: 1 / span 2; margin-top: calc(32 * var(--lp-f-u)); }

  .lp-footer__logo img { width: calc(156.25 * var(--lp-f-u)); }

  .lp-footer__addresses { margin-top: calc(17.25 * var(--lp-f-u)); }
  .lp-footer__addr + .lp-footer__addr { margin-top: calc(25 * var(--lp-f-u)); }
  .lp-footer__addr-text { max-width: calc(150 * var(--lp-f-u)); }

  .lp-footer__tiles { margin-top: calc(15 * var(--lp-f-u)); }
  .lp-footer__tile-value,
  .lp-footer__tile--mail .lp-footer__tile-value { font-size: calc(18 * var(--lp-f-u)); }

  .lp-footer__nav {
    grid-template-columns: calc(126 * var(--lp-f-u)) auto;
    margin-top: calc(21 * var(--lp-f-u));
  }
  .lp-footer__nav li { height: calc(23 * var(--lp-f-u)); font-size: calc(12 * var(--lp-f-u)); }

  .lp-footer__legalinfo { margin-top: calc(18.8 * var(--lp-f-u)); }
  .lp-footer__address-line {
    order: 1;
    max-width: calc(300 * var(--lp-f-u));
    margin-top: 0;
    margin-right: calc(-20 * var(--lp-f-u));
    line-height: 1.3;
  }
  .lp-footer__nie { order: 2; margin-top: calc(26 * var(--lp-f-u)); }

  .lp-footer__legal { margin-top: calc(13 * var(--lp-f-u)); }
  .lp-footer__legal-note { height: calc(24 * var(--lp-f-u)); }
  .lp-footer__legal-note:first-child { height: calc(35 * var(--lp-f-u)); }
  .lp-footer__legal-links li { height: calc(21 * var(--lp-f-u)); }

  .lp-footer__copy { margin-top: calc(10 * var(--lp-f-u)); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-footer__legal-links a { transition: none; }
}

/* «cookie settings» — a button that has to read as one of the legal links */
.lp-footer__cookiebtn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.lp-footer__cookiebtn:hover,
.lp-footer__cookiebtn:focus-visible { text-decoration: underline; }

/* ---- 11-modals.css ---- */
/* ============================================================
   11 — Modals + cookie bar
   rec726640609 (#discuss) · rec735619771 (#event) · rec2200546591 (#prices, dormant)
   rec2029228651 (cookie bar, t886)

   Geometry taken from S/spec/{1440,440}/popup_discuss.json + popup_event.json
   and the Tilda rules for .t-popup / .t702 / .t886:
     overlay   rgba(55,203,223,.5) + backdrop-filter blur(3px), opacity .3s ease-in-out
     dialog    560px (460 ≤1200) · margin 65px auto · radius 20 · bg #e6f4f5
               padding 40/45 · transform translateY(30%) scale(.9) → none, .3s ease-in-out
     ≤560 in the original (≤639 here): full-screen sheet + fixed 50px close bar
   ============================================================ */

.lp-modals { --lp-cookie-link: #3fe0f5; }

/* ---------- overlay ---------- */
.lp-modal {
  --lp-modal-w: 560px;
  position: fixed;
  inset: 0;
  z-index: 2000;   /* above the header (900), the cookie bar (1500) and the off-canvas menu (1600/1601) */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px;
  background: rgba(55, 203, 223, .5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  cursor: pointer;
  transition: opacity .3s ease-in-out;
}
.lp-modal[hidden] { display: none; }
.lp-modal.is-open { opacity: 1; }
html.lp-modal-open { overflow: hidden; }

/* ---------- close control (fixed to the viewport, like the original) ---------- */
.lp-modal__close-bar {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
}
.lp-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  padding: 10px;
  color: var(--lp-white);
  transition: opacity .3s ease-in-out;
}
.lp-modal__close:hover,
.lp-modal__close:focus-visible { opacity: .7; }
.lp-modal__close-icon { width: 23px; height: 23px; overflow: hidden; }

/* ---------- dialog ---------- */
.lp-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--lp-modal-w);
  margin: 65px auto;
  padding: 40px 45px;
  border-radius: var(--lp-r-md);
  background: var(--lp-bg);
  cursor: default;
  transform: translateY(30%) scale(.9);
  transition: transform .3s ease-in-out;
}
.lp-modal.is-open .lp-modal__dialog { transform: none; }
.lp-modal__dialog:focus { outline: 0; }

.lp-modal__title {
  margin: 0 0 24px;
  padding-bottom: 15px;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.23;
  letter-spacing: var(--lp-tracking-tight);
  text-align: center;
  color: var(--lp-teal-600);
}
/* the price popup keeps the bare 11px title margin of the original (the other
   two modals carry the wider 24px gap) */
.lp-modal__title--prices { margin-bottom: 11px; padding-bottom: 5px; line-height: 1.1; }

.lp-modal__descr {
  margin: 0 0 24px;
  padding-bottom: 20px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
  text-align: center;
  color: var(--lp-text);
}

/* ---------- form: the "large" cut of the shared primitives ---------- */
.lp-modal .lp-form {
  --lp-field-h: 60px;
  --lp-field-r: 10px;
  --lp-field-fs: 16px;
  --lp-field-lh: 1.33;
  --lp-field-px: 20px;
  --lp-field-gap-y: 25px;
  --lp-field-pt: 17px;
  --lp-textarea-h: 102px;
}
.lp-modal .lp-form.lp-modal__form--event { --lp-textarea-h: 170px; }

.lp-modal .lp-input::placeholder,
.lp-modal .lp-textarea::placeholder { opacity: .5; }
/* the phone input is not .lp-input, so it needs the muted tint spelled out */
.lp-modal .lp-phone__input::placeholder { color: var(--lp-text-muted); opacity: .5; }

/* the original keeps 20/45 padding on <select> at every artboard */
.lp-modal .lp-select {
  padding-left: 20px;
  padding-right: 45px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%230a2033'/%3E%3C/svg%3E");
  background-position: right 20px center;
}
.lp-modal .lp-select.is-placeholder { color: var(--lp-text-muted); }

.lp-modal .lp-phone { gap: 10px; }
.lp-modal .lp-phone__flag {
  flex: 0 0 auto;
  width: 18px;
  height: 13px;
  box-shadow: 0 0 5px rgba(0, 0, 0, .3);
}
/* fill the whole white box so the empty part of the row is still clickable */
.lp-modal .lp-phone__input { align-self: stretch; }

/* group label + checkbox list ("¿Qué necesitas?") */
.lp-modal__group { display: flex; flex-direction: column; gap: 10px; }
.lp-modal .lp-form__label { font-size: 20px; line-height: 1.55; }
.lp-modal__options { display: flex; flex-direction: column; gap: 10px; }

.lp-modal .lp-checkbox {
  --lp-check-size: 20px;
  --lp-check-bw: 2px;
  padding-top: 1.6px;
  font-size: 14px;
  line-height: 1.2;
}
.lp-modal .lp-checkbox__box {
  margin-top: -1.6px;
  border-color: var(--lp-text);
}
/* the tick is measured off the box's OUTER size (8x3 at 20px) and its arms sit
   outside that content box, so it must not inherit border-box sizing */
.lp-modal .lp-checkbox__box::after {
  box-sizing: content-box;
  width: calc(var(--lp-check-size) * .4);
  height: calc(var(--lp-check-size) * .15);
}

/* date field — 245px wide with the calendar glyph inside (event modal) */
.lp-modal__date { position: relative; max-width: 245px; }
.lp-modal__date .lp-input { padding-right: 45px; }
.lp-modal__date-icon {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 25px;
  height: auto;
  transform: translateY(-50%);
  fill: var(--lp-text);
  pointer-events: none;
}

.lp-modal .lp-submit {
  --lp-btn-h: 60px;
  --lp-btn-px: 60px;
  --lp-btn-fs: 16px;
  --lp-btn-r: var(--lp-r-xl);
  width: 100%;
  letter-spacing: normal;
}
.lp-modal .lp-form__error { font-size: 14px; }
.lp-modal .lp-form__success {
  padding: 20px;
  border-radius: var(--lp-r-input-lg);
  background: var(--lp-teal-500);
  color: var(--lp-white);
  text-align: center;
}

/* ---------- cookie bar (t886) ---------- */
.lp-cookie {
  position: fixed;
  right: 20px;
  bottom: 30px;
  z-index: 1500;
}
.lp-cookie[hidden] { display: none; }
.lp-cookie__inner {
  display: flex;
  align-items: center;
  width: 700px;
  max-width: calc(100vw - 40px);
  padding: 15px 25px;
  border-radius: var(--lp-r-md);
  background: var(--lp-bg);
}
.lp-cookie__text {
  padding-right: 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
  text-align: left;
  color: var(--lp-text);
}
.lp-cookie__text a { color: var(--lp-cookie-link); }
.lp-cookie__text a:hover,
.lp-cookie__text a:focus-visible { text-decoration: underline; }
.lp-cookie__btn {
  --lp-btn-h: 30px;
  --lp-btn-px: 20px;
  --lp-btn-fs: 14px;
  --lp-btn-r: var(--lp-r-md);
  flex-shrink: 0;
  margin-left: auto;
  letter-spacing: normal;
}

/* ============================================================
   Artboards
   ============================================================ */
@media (max-width: 1199px) {
  .lp-modal { --lp-modal-w: 460px; }
  /* below the desktop artboard the bar is reachable by touch (tablets and
     phones), so the only dismiss control grows to a 44px target — the 30px
     height of the original is kept for the pointer-only ≥1200 artboard */
  .lp-cookie__btn { --lp-btn-h: 44px; min-width: 64px; }
}

@media (max-width: 959px) {
  .lp-modal__title { font-size: 32px; }
  .lp-modal .lp-form__label { font-size: 18px; }
  .lp-modal .lp-submit { --lp-btn-px: 45px; }
  .lp-cookie { right: 0; left: 0; bottom: 0; }
  .lp-cookie__inner { width: 100%; max-width: none; border-radius: 0; }
}

@media (max-width: 639px) {
  /* full-screen sheet + fixed close bar, as in the original at ≤560 */
  .lp-modal { padding: 0; }
  .lp-modal__dialog {
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding: 70px 20px 20px;
    border-radius: 0;
  }
  .lp-modal__close-bar {
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 50px;
    justify-content: flex-end;
    background: var(--lp-bg);
  }
  /* 44px touch target inside the 50px close bar (the glyph stays 16px) */
  .lp-modal__close {
    width: 44px;
    height: 44px;
    margin-right: 6px;
    color: var(--lp-teal-500);
  }
  .lp-modal__close-icon { width: 16px; height: 16px; }

  .lp-modal__title { font-size: 28px; margin-bottom: 14px; }
  .lp-modal__descr { margin-bottom: 14px; }

  .lp-modal .lp-form {
    --lp-field-h: 50px;
    --lp-field-px: 14px;
    --lp-field-pt: 12px;
  }
  .lp-modal .lp-form__label { font-size: 16px; line-height: 1.45; }
  .lp-modal .lp-submit { --lp-btn-h: 50px; --lp-btn-px: 30px; }

  .lp-cookie__text { line-height: 1.45; }
}

@media (max-width: 479px) {
  .lp-modal__date { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-modal__dialog { transform: none; }
}

/* two actions now: «essential only» and «accept all» (site-wide consent contract) */
.lp-cookie__actions {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  margin-left: auto;
}
.lp-cookie__btn { margin-left: 0; }
.lp-cookie__btn--ghost {
  background: transparent;
  color: var(--lp-teal-600);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.lp-cookie__btn--ghost:hover,
.lp-cookie__btn--ghost:focus-visible { background: rgba(20,125,135,.08); }
@media (max-width: 639px) {
  .lp-cookie__inner { flex-wrap: wrap; }
  .lp-cookie__actions { width: 100%; margin-left: 0; }
  .lp-cookie__btn { flex: 1 1 0; }
}