/*
  CASAS DEL MAR — STYLESHEET
  --------------------------
  This file preserves the approved visual result.

  MAINTENANCE MAP
  1. Global tokens / base styles
  2. Header + navigation
  3. Hero
  4. Content sections
  5. Brand-system overrides
  6. Approved component layouts
  7. Desktop final polish
  8. Mobile final state + fullscreen menu

  IMPORTANT
  The lower blocks are the final approved overrides from the design process.
  When changing a component, search for its section ID (#servicios, #renders, etc.)
  and check the FINAL blocks near the bottom before adding a new override.
*/

    :root {
      --blue-deep: #0A2C52;
      --white: #F8F6F1;
      --concrete: #E3DFD7;
      --ink: #101C28;
      --ink-soft: #3C4854;
      --amber: #C98B3C;
      --amber-soft: #E3A957;
      --on-blue-soft: rgba(247,248,244,0.82);
      --sign-font: 'Plus Jakarta Sans', Arial, sans-serif;
      --heading-font: 'Plus Jakarta Sans', Arial, sans-serif;
      --read-font: 'Plus Jakarta Sans', Arial, sans-serif;
      --ease: cubic-bezier(0.23, 1, 0.32, 1);
      --gutter: clamp(1.25rem, 4vw, 3rem);
      --nav-h: 68px;
      --focus: var(--brand-blue);
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); -webkit-text-size-adjust: 100%; }
    body {
      margin: 0; background: var(--white); color: var(--ink);
      font-family: var(--read-font); font-size: 1.0625rem; line-height: 1.65;
      -webkit-tap-highlight-color: transparent;
      caret-color: var(--brand-blue);
    }
    img { display: block; max-width: 100%; }
    ::selection { background: var(--brand-blue); color: var(--white); }
    a { color: inherit; }
    button { font: inherit; color: inherit; cursor: pointer; }
    :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
    .on-blue { --focus: #fff; }
    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

    * { scrollbar-color: var(--brand-blue) var(--concrete); scrollbar-width: thin; }

    .skip-link {
      position: fixed; top: -100px; left: 1rem; z-index: 100;
      background: var(--white); color: var(--brand-blue); font: 800 0.9rem var(--sign-font);
      padding: 0.7rem 1.1rem; border-radius: 8px; text-decoration: none;
      transition: top 160ms var(--ease);
    }
    .skip-link:focus { top: 1rem; }

    .wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
    @media (min-width: 1100px) { .wrap { padding-left: calc(var(--gutter) + 3.5rem); } }

    section[data-km] { position: relative; padding-block: clamp(4.5rem, 10vw, 8rem); }
    .bg-blue { background: var(--brand-blue); color: var(--white); }
    .bg-deep { background: var(--blue-deep); color: var(--white); }
    .bg-concrete { background: var(--concrete); }
    .bg-white { background: var(--white); }

    .h-sign {
      font: 800 clamp(2.2rem, 5.2vw, 3.9rem)/1.02 var(--sign-font);
      letter-spacing: -0.02em; margin: 0 0 1.5rem; text-wrap: balance;
    }
    .lede { max-width: 62ch; color: var(--ink-soft); margin: 0 0 1.25rem; }
    .bg-blue .lede, .bg-deep .lede { color: var(--on-blue-soft); }
    .bg-blue .sq { border-color: var(--white); color: var(--brand-blue); }

    .ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

    .sign {
      position: relative; overflow: hidden; background: var(--brand-blue); color: var(--white);
      border-radius: 16px; padding: calc(clamp(1.1rem, 2.4vw, 1.75rem) + 7px);
      box-shadow: 0 22px 44px -14px rgba(0,0,0,0.6), 0 3px 8px rgba(0,0,0,0.35);
    }
    .sign::before {
      content: ""; position: absolute; inset: 7px; border: 2px solid rgba(247,248,244,0.92);
      border-radius: 10px; pointer-events: none;
    }

    .plate {
      display: inline-flex; align-items: center; gap: 0.8rem; min-height: 52px;
      background: var(--white); color: var(--brand-blue); text-decoration: none; border: 0;
      font: 800 1rem/1 var(--sign-font); letter-spacing: 0.04em; text-transform: uppercase;
      padding: 0.95rem 1.4rem; border-radius: 12px;
      box-shadow: 0 12px 24px -12px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.25);
      transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
    }
    .plate--blue { background: var(--brand-blue); color: var(--white); }
    .plate:active { transform: translateY(1px) scale(0.98); }
    @media (hover: hover) and (pointer: fine) {
      .plate:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -12px rgba(0,0,0,0.65), 0 2px 4px rgba(0,0,0,0.25); }
      .plate:hover .ic { transform: translateX(3px); }
    }
    .plate .ic { transition: transform 160ms var(--ease); }
    .link-text { display: inline-flex; align-items: center; min-height: 44px; font: 700 0.95rem var(--sign-font); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 2px; }

    /* ---------- NAV ---------- */
    #navbar {
      position: fixed; inset: 0 0 auto 0; z-index: 40; color: #fff;
      transition: background-color 240ms var(--ease), box-shadow 240ms var(--ease);
    }
    #navbar::before { content: ""; position: absolute; inset: 0 0 -48px; background: linear-gradient(rgba(6,32,60,0.6), transparent); z-index: -1; pointer-events: none; transition: opacity 240ms var(--ease); }
    #navbar.scrolled::before, #navbar.menu-open::before { opacity: 0; }
    #navbar.scrolled { background: var(--brand-blue); box-shadow: 0 2px 0 rgba(247,248,244,0.9), 0 10px 24px -12px rgba(0,0,0,0.6); }
    #navbar .wrap { max-width: 1440px; padding-left: var(--gutter); }
    .nav-in { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
    .brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
    .logo-plate { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.75rem; height: 2.75rem; overflow: hidden; background: #fff; border-radius: 10px; }
    .logo-plate img { width: 215%; max-width: none; height: auto; flex: none; transform: translateY(1%); }
    .brand span { font: 800 0.95rem/1 var(--sign-font); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
    .nav-links { display: none; gap: clamp(1rem, 1.6vw, 1.6rem); list-style: none; margin: 0; padding: 0; }
    .nav-links a {
      font: 600 0.85rem var(--sign-font); letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none;
      padding: 0.5rem 0; border-bottom: 2px solid transparent; transition: border-color 160ms var(--ease);
    }
    .nav-links a.active-link { border-bottom-color: #245F87; }
    @media (hover: hover) and (pointer: fine) { .nav-links a:hover { border-bottom-color: rgba(255,255,255,0.8); } }
    .nav-cta { display: none; }
    .menu-btn { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; background: none; border: 0; }
    .menu-btn .ic { width: 28px; height: 28px; stroke-width: 2.2; }
    #mobile-menu { display: none; background: var(--brand-blue); border-top: 2px solid rgba(247,248,244,0.9); padding: 0.5rem var(--gutter) 1.25rem; }
    #mobile-menu.open { display: block; }
    #mobile-menu ul { list-style: none; margin: 0; padding: 0; }
    #mobile-menu li a { display: flex; justify-content: space-between; align-items: center; min-height: 52px; font: 600 0.92rem var(--sign-font); text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; border-bottom: 1px solid rgba(247,248,244,0.25); }
    #mobile-menu .plate { margin-top: 1rem; width: 100%; justify-content: center; }
    #navbar.menu-open { background: var(--brand-blue); }
    @media (min-width: 1180px) {
      .nav-links { display: flex; }
      .nav-cta { display: block; }
      .menu-btn, #mobile-menu, .nav-km { display: none !important; }
    }
    .nav-km { margin-left: auto; margin-right: 0.4rem; display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.35rem 0.6rem; background: var(--white); color: var(--brand-blue); border-radius: 8px; font: 700 0.75rem/1 var(--sign-font); letter-spacing: 0.08em; text-transform: uppercase; }
    .nav-km b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
    @media (min-width: 1100px) { .nav-km { display: none; } }
    @media (max-width: 400px) {
      .nav-in { gap: 0.6rem; }
      .brand { gap: 0.5rem; }
      .brand span:last-child { font-size: 0.78rem; letter-spacing: 0.04em; }
      .logo-plate { width: 2.5rem; height: 2.5rem; }
      .nav-km { margin-right: 0; padding: 0.3rem 0.5rem; }
    }
    .nav-cta .plate { min-height: 44px; padding: 0.7rem 1.1rem; font-size: 0.85rem; white-space: nowrap; }

    /* ---------- HITO (hud) ---------- */
    .hito {
      display: none; position: fixed; left: 14px; top: 50%; transform: translateY(-50%); z-index: 30;
      width: 60px; padding: 22px 0 14px; text-align: center;
      background: linear-gradient(to bottom, var(--brand-blue) 0 12px, var(--concrete) 12px); color: var(--ink); border: 2px solid var(--ink);
      border-radius: 30px 30px 6px 6px; box-shadow: 0 14px 26px -12px rgba(0,0,0,0.55);
    }

    .hito-km { display: block; font: 700 0.7rem/1 var(--sign-font); letter-spacing: 0.1em; text-transform: uppercase; }
    .hito-n { display: block; font: 800 2.1rem/1.1 var(--sign-font); font-variant-numeric: tabular-nums; }
    .hito-n.roll { animation: roll 320ms var(--ease); }
    .hito-name { display: block; margin-top: 6px; font: 700 0.72rem/1 var(--sign-font); letter-spacing: 0.14em; text-transform: uppercase; writing-mode: vertical-rl; margin-inline: auto; }
    @keyframes roll { from { opacity: 0; transform: translateY(45%); } to { opacity: 1; transform: none; } }
    @media (min-width: 1100px) { .hito { display: block; } }

    /* ---------- HERO ---------- */
    #inicio { min-height: 100svh; padding: 0; display: flex; align-items: flex-end; overflow: hidden; background: var(--blue-deep); color: var(--white); }
    .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1000ms ease; }
    .slide.active { opacity: 1; }
    .slide img { width: 100%; height: 100%; object-fit: cover; }
    .hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,34,66,0.7) 0%, rgba(8,34,66,0.16) 55%, rgba(8,34,66,0.44) 100%); }
    .hero-in { position: relative; width: 100%; padding-block: calc(var(--nav-h) + 2rem) clamp(2.5rem, 7vh, 4.5rem); }
    .hero-sign { max-width: 580px; }
    .hero-sign::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.32) 50%, transparent 62%);
      transform: translateX(-130%); animation: sheen 1500ms var(--ease) 500ms 1 forwards;
    }
    @keyframes sheen { to { transform: translateX(130%); } }
    .hero-h { font: 800 clamp(2.3rem, 5.2vw, 4.2rem)/0.98 var(--sign-font); letter-spacing: -0.025em; margin: 0 0 1.1rem; text-wrap: balance; }
    .hero-sub { display: flex; align-items: center; gap: 0.75rem; margin: 0; font: 600 1rem/1.3 var(--sign-font); color: var(--on-blue-soft); }
    .hero-sub .ic { width: 1.5em; height: 1.5em; }
    .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; margin-top: 1.25rem; }
    .hero-actions .link-text { color: #fff; }
    .dashes { position: absolute; right: var(--gutter); bottom: clamp(1.5rem, 4vh, 2.5rem); display: flex; gap: 2px; z-index: 2; }
    .dash { position: relative; width: 44px; height: 44px; background: none; border: 0; padding: 0; }
    .dash::before { content: ""; position: absolute; left: 7px; right: 7px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: rgba(255,255,255,0.45); transition: background-color 200ms var(--ease); }
    .dash[aria-current="true"]::before { background: var(--amber-soft); }
    @media (max-width: 640px) { .dashes { right: 50%; transform: translateX(50%); bottom: 0.5rem; } .hero-in { padding-bottom: 4rem; } }

    /* ---------- NOSOTROS ---------- */
    .about { display: grid; gap: 2.5rem; align-items: center; }
    .about-video { position: relative; margin: 0; width: min(100%, 400px, calc(78svh * 9 / 16)); background: var(--ink); border-radius: 4px; overflow: hidden; }
    .about-video video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
    .vid-btn { position: absolute; right: 0.75rem; bottom: 0.75rem; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: var(--white); color: var(--brand-blue); border: 0; border-radius: 50%; box-shadow: 0 8px 18px -8px rgba(0,0,0,0.6); transition: transform 160ms var(--ease); }
    .vid-btn:active { transform: scale(0.94); }
    .about-copy p { margin: 0 0 1.1rem; max-width: 60ch; }
    .route { position: relative; margin: 2rem 0 0; padding-top: 2.25rem; }
    .route::before { content: ""; position: absolute; left: 0; right: 0; top: 0.55rem; height: 4px; background: var(--ink); border-radius: 2px; }
    .route::after { content: ""; position: absolute; left: 0; right: 0; top: calc(0.55rem + 1px); height: 2px; background: repeating-linear-gradient(90deg, var(--concrete) 0 14px, transparent 14px 28px); }
    .route-ends { display: flex; justify-content: space-between; gap: 1rem; font: 700 0.85rem var(--sign-font); letter-spacing: 0.06em; text-transform: uppercase; }
    .route-ends span { position: relative; }
    .route-ends span::before { content: ""; position: absolute; top: -1.95rem; width: 16px; height: 16px; border: 4px solid var(--brand-blue); background: var(--concrete); border-radius: 50%; }
    .route-ends span:first-child::before { left: 0; }
    .route-ends span:last-child { text-align: right; }
    .route-ends span:last-child::before { right: 0; }
    .route-note { margin: 1.5rem 0 0; font-weight: 600; }
    @media (min-width: 900px) {
      .about { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 5rem; }
      .about-copy { padding-bottom: 1rem; }
    }

    /* ---------- SERVICIOS ---------- */
    .svc-list { list-style: none; margin: 2.5rem 0 0; padding: 0.5rem clamp(1.1rem, 3vw, 2.25rem); border: 2px solid rgba(247,248,244,0.92); border-radius: 18px; }
    .svc:last-child { border-bottom: 0; }
    .svc { display: grid; gap: 0.9rem; padding-block: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 2px solid rgba(247,248,244,0.35); }
    .svc-t { display: flex; align-items: center; gap: 1.1rem; }
    .svc-t .ic { width: 2.6rem; height: 2.6rem; stroke-width: 1.5; }
    .svc h3 { margin: 0; font: 800 clamp(1.5rem, 3vw, 2.3rem)/1.05 var(--sign-font); letter-spacing: -0.01em; }
    .svc p { margin: 0; color: var(--on-blue-soft); max-width: 46ch; }
    @media (min-width: 800px) {
      .svc { grid-template-columns: 5fr 7fr; gap: 3rem; align-items: center; }
    }

    /* ---------- OBRAS ---------- */
    .obras-head { display: grid; gap: 1rem; margin-bottom: 2.25rem; }
    .mosaic { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(120px, 17vw, 230px); gap: 10px; }
    .ph { display: block; padding: 0; border: 0; background: var(--concrete); overflow: hidden; border-radius: 3px; position: relative; }
    .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
    .ph::after { content: ""; position: absolute; inset: 0; border-radius: 3px; box-shadow: inset 0 0 0 0 var(--amber-soft); pointer-events: none; transition: box-shadow 200ms var(--ease); }
    @media (hover: hover) and (pointer: fine) { .ph:hover img { transform: scale(1.035); } .ph:hover::after { box-shadow: inset 0 0 0 4px var(--amber-soft); } }
    .ph:active img { transform: scale(1.01); }
    .t1 { grid-column: 1 / 13; grid-row: span 2; }
    .t2, .t3, .t4, .t5, .t6, .t7, .t8, .t9 { grid-column: span 6; }
    @media (min-width: 800px) {
    .t1 { grid-column: 1 / 8; grid-row: span 2; }
    .t2 { grid-column: 8 / 13; }
    .t3 { grid-column: 8 / 13; }
    .t4, .t5 { grid-column: span 6; }
    .t6, .t7, .t8, .t9 { grid-column: span 3; }
}
    .more-row { display: grid; gap: 2rem; margin-top: 2.5rem; align-items: start; }
    .more-row h3 { font: 800 1.6rem/1.1 var(--sign-font); margin: 0 0 0.6rem; }
    .more-row p { margin: 0 0 1.25rem; color: var(--ink-soft); max-width: 44ch; }
    .dest { padding: calc(1.25rem + 7px); }
    .dest h3 { font: 800 1.3rem/1.1 var(--sign-font); margin: 0 0 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; position: relative; }
    .dest ul { list-style: none; margin: 0; padding: 0; position: relative; }
    .dest li + li { border-top: 1px solid rgba(247,248,244,0.35); }
    .dest a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; text-decoration: none; font: 700 1.05rem var(--sign-font); }
    .dest a .ic { transition: transform 160ms var(--ease); }
    @media (hover: hover) and (pointer: fine) { .dest a:hover .ic { transform: translateX(4px); } .dest a:hover span { text-decoration: underline; text-underline-offset: 0.3em; } }
    @media (min-width: 900px) { .more-row { grid-template-columns: 6fr 5fr; gap: 4rem; } }
    #gal-rest { margin-top: 10px; columns: 2; column-gap: 10px; }
    @media (min-width: 700px) { #gal-rest { columns: 3; } }
    @media (min-width: 1000px) { #gal-rest { columns: 4; } }
    #gal-rest[hidden] { display: none; }
    #gal-rest .ph { margin-bottom: 10px; break-inside: avoid; }
    #gal-rest .ph img { height: auto; }

    /* ---------- RENDERS ---------- */
    .strip-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.25rem; margin-bottom: 2rem; }
    .strip-btns { display: flex; gap: 0.6rem; }
    .sq { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 2px solid var(--ink); background: var(--white); border-radius: 12px; transition: transform 160ms var(--ease), background-color 160ms var(--ease); }
    .sq:active { transform: scale(0.96); }
    @media (hover: hover) and (pointer: fine) { .sq:hover { background: var(--ink); color: var(--white); } }
    .strip { --edge: max(var(--gutter), calc((100vw - 1180px) / 2 + var(--gutter))); display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding: 0 var(--edge) 1rem; scroll-padding-inline: var(--edge); scrollbar-width: thin; }
    @media (min-width: 1100px) { .strip { padding-left: calc(var(--edge) + 3.5rem); scroll-padding-left: calc(var(--edge) + 3.5rem); } }
    #renders { padding-bottom: clamp(3rem, 6vw, 5rem); }
    .strip .ph { flex: none; height: clamp(220px, 34vw, 400px); aspect-ratio: 4 / 3; scroll-snap-align: start; }
    .strip:focus-visible { outline-offset: -3px; }
    .strip { scrollbar-color: auto; scrollbar-width: auto; }
    .strip::-webkit-scrollbar { height: 10px; }
    .strip::-webkit-scrollbar-track { background: rgba(247,248,244,0.2); border-radius: 5px; }
    .strip::-webkit-scrollbar-thumb { background: var(--white); border-radius: 5px; }
    .strip::-webkit-scrollbar-button { display: none; }

    /* ---------- PROCESO ---------- */
    .road-wrap { position: relative; margin-top: 3rem; padding-left: 3.75rem; }
    .road { position: absolute; left: 0.55rem; top: 0; bottom: 0; width: 18px; background: var(--ink); border-radius: 9px; overflow: hidden; }
    .road::before, .road::after { content: ""; position: absolute; left: 50%; width: 3px; margin-left: -1.5px; top: 0; background: repeating-linear-gradient(to bottom, #fff 0 16px, transparent 16px 32px); }
    .road::before { bottom: 0; opacity: 0.28; }
    .road::after { height: var(--p, 0%); background: repeating-linear-gradient(to bottom, var(--amber-soft) 0 16px, transparent 16px 32px); }
    .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2.25rem, 5vw, 3.5rem); }
    .step { position: relative; }
    .step::before { content: ""; position: absolute; left: -3.2rem; top: 1.05rem; width: 2.4rem; height: 3px; background: var(--ink); }
    .salida { display: inline-block; flex: none; padding: 0.4rem 0.8rem; background: var(--brand-blue); color: var(--white); border-radius: 8px; box-shadow: inset 0 0 0 2px var(--brand-blue), inset 0 0 0 4px var(--white); font: 800 0.85rem/1 var(--sign-font); letter-spacing: 0.08em; text-transform: uppercase; }
    .salida b { font-variant-numeric: tabular-nums; }
    .step h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.9rem; margin: 0 0 0.5rem; font: 800 clamp(1.5rem, 3vw, 2.1rem)/1.05 var(--sign-font); }
    .step p { margin: 0; max-width: 56ch; color: var(--ink-soft); }
    @media (min-width: 800px) { .step { display: grid; grid-template-columns: 6fr 6fr; gap: 0.5rem 2.5rem; align-items: start; } .step h3 { margin: 0; } }
    .js .step > * { clip-path: inset(0 0 100% 0); opacity: 0.001; transition: clip-path 700ms var(--ease), opacity 700ms var(--ease); }
    .js .step.in > * { clip-path: inset(-4px -4px -4px -4px); opacity: 1; }
    .js .step > :nth-child(2) { transition-delay: 70ms; }
    .js .step > :nth-child(3) { transition-delay: 140ms; }

    /* ---------- PRECIOS ---------- */
    .price { display: grid; gap: 3rem; align-items: center; }
    .price .lede { margin-bottom: 1.5rem; }
    .signs { display: grid; gap: 1.5rem; }
    .plate-price { padding: calc(1.75rem + 7px); }
    .plate-price .claim { position: relative; margin: 0 0 1.25rem; font: 800 clamp(1.7rem, 3.4vw, 2.5rem)/1.18 var(--sign-font); letter-spacing: -0.01em; }
    .plate-price .claim b { font-size: 1.12em; font-weight: 800; white-space: nowrap; }
    .plate-price .note { position: relative; margin: 0; color: var(--on-blue-soft); font-size: 0.98rem; }
    .pay { margin-top: 2rem; padding-top: 1.5rem; border-top: 2px solid rgba(247,248,244,0.35); max-width: 46ch; }
    .pay h3 { margin: 0 0 0.4rem; font: 800 1.3rem var(--sign-font); }
    .pay p { margin: 0; color: var(--on-blue-soft); }
    @media (min-width: 900px) { .price { grid-template-columns: 6fr 6fr; gap: 5rem; } }
    .plate-price.sign { background: var(--brand-blue); }
    .bg-deep .plate-price.sign { background: var(--brand-blue); }

    /* ---------- MATERIALES ---------- */
    .mat { display: grid; gap: 3rem; align-items: start; }
    .spec { margin: 0; border-top: 2px solid var(--ink); }
    .spec > div { display: grid; gap: 0.35rem; padding: 1.15rem 0; border-bottom: 1px solid rgba(16,28,40,0.25); }
    .spec dt { display: flex; align-items: center; gap: 0.6rem; font: 800 1.2rem/1.2 var(--sign-font); }
    .spec dd { margin: 0; color: var(--ink-soft); max-width: 52ch; }
    .wood-dot { width: 12px; height: 12px; background: var(--amber); border-radius: 2px; flex: none; }
    @media (min-width: 900px) { .mat { grid-template-columns: 5fr 7fr; gap: 5rem; } .mat-copy { position: sticky; top: calc(var(--nav-h) + 2rem); } }

    /* ---------- LLAMADA ---------- */
    .call-head { max-width: 62ch; }
    .scarce { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0 0; font: 700 1.05rem var(--sign-font); letter-spacing: 0.01em; }
    .ask { margin: 2.5rem 0 1rem; font: 700 1.1rem var(--sign-font); }
    .desvios { display: grid; gap: 1rem; }
    .desvio { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; min-height: 96px; text-align: left; padding: 1.1rem 1.25rem; background: transparent; color: var(--white); border: 2px solid rgba(247,248,244,0.7); border-radius: 14px; transition: background-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease); }
    .desvio strong { display: block; font: 800 1.35rem/1.1 var(--sign-font); }
    .desvio em { display: block; margin-top: 0.25rem; color: var(--on-blue-soft); font: 600 0.95rem var(--sign-font); font-style: normal; }
    .desvio .ic { width: 2.2rem; height: 2.2rem; stroke-width: 2.2; }
    .desvio:active { transform: scale(0.985); }
    @media (hover: hover) and (pointer: fine) { .desvio:hover { background: rgba(247,248,244,0.12); } }
    .desvio[aria-pressed="true"] { background: var(--white); color: var(--brand-blue); border-color: var(--white); }
    .desvio[aria-pressed="true"] em { color: var(--ink-soft); }
    @media (min-width: 800px) { .desvios { grid-template-columns: repeat(3, 1fr); } }
    .call-out { margin-top: 1.5rem; }
    .call-out[hidden] { display: none; }
    .call-panel { padding: calc(1.5rem + 7px); max-width: 640px; }
    .call-panel p { position: relative; margin: 0 0 1.25rem; }
    .call-panel .plate { position: relative; }

    /* ---------- CONTACTO ---------- */
    .contact { display: grid; gap: 3.5rem; margin-top: 2.5rem; }
    .field { margin-bottom: 1.25rem; }
    .field label { display: block; margin-bottom: 0.4rem; font: 700 0.85rem var(--sign-font); letter-spacing: 0.06em; text-transform: uppercase; }
    .field input, .field textarea {
      width: 100%; padding: 0.85rem 1rem; font: 400 1.05rem var(--read-font); color: var(--ink); background: #fff;
      border: 2px solid var(--ink); border-radius: 10px; transition: box-shadow 160ms var(--ease), border-color 160ms var(--ease);
    }
    .field input::placeholder, .field textarea::placeholder { color: #66727E; }
    .field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 4px rgba(15,63,115,0.28); }
    .field textarea { resize: vertical; min-height: 9rem; }
    .contact .plate { width: 100%; justify-content: center; cursor: pointer; }
    .channels { list-style: none; margin: 0 0 2rem; padding: 0; border-top: 2px solid var(--ink); }
    .channels li { border-bottom: 1px solid rgba(16,28,40,0.25); }
    .channels a, .channels .row { display: flex; align-items: center; gap: 1rem; min-height: 64px; padding: 0.6rem 0; text-decoration: none; }
    .channels .ic { width: 1.6rem; height: 1.6rem; color: var(--brand-blue); }
    .channels small { display: block; font: 700 0.75rem/1 var(--sign-font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
    .channels strong { font: 800 1.15rem/1.2 var(--sign-font); overflow-wrap: anywhere; }
    @media (hover: hover) and (pointer: fine) { .channels a:hover strong { text-decoration: underline; text-underline-offset: 0.3em; } }
    .map { border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; }
    .map iframe { display: block; width: 100%; height: 240px; border: 0; }
    @media (min-width: 900px) { .contact { grid-template-columns: 6fr 5fr; gap: 5rem; } }

    /* ---------- FOOTER ---------- */
    footer { background: var(--ink); color: var(--white); padding-block: 4rem 6rem; --focus: #fff; }
    .foot { display: grid; gap: 2.5rem; }
    .foot .logo-plate { width: 3.25rem; height: 3.25rem; }
    .foot p { margin: 0.9rem 0 0; color: rgba(247,248,244,0.78); max-width: 34ch; }
    .foot h3 { margin: 0 0 0.8rem; font: 700 0.85rem var(--sign-font); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(247,248,244,0.78); }
    .foot ul { list-style: none; margin: 0; padding: 0; columns: 2; }
    .foot li a { display: inline-flex; align-items: center; min-height: 44px; font: 600 1rem var(--sign-font); text-decoration: none; }
    @media (hover: hover) and (pointer: fine) { .foot li a:hover { text-decoration: underline; text-underline-offset: 0.3em; } }
    .foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(247,248,244,0.25); font-size: 0.9rem; color: rgba(247,248,244,0.78); }
    @media (min-width: 900px) { .foot { grid-template-columns: 5fr 4fr 4fr; } }

    /* ---------- FAB (mobile) ---------- */
    .fab { position: fixed; right: 1rem; bottom: 1rem; z-index: 35; white-space: nowrap; transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
    .fab.off, .fab.scrolling { opacity: 0; pointer-events: none; transform: translateY(12px); }
    .fab.plate { width: 56px; height: 56px; min-height: 0; padding: 0; justify-content: center; border-radius: 50%; }
    .fab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    @media (min-width: 1180px) { .fab { display: none; } }

    /* ---------- WHATSAPP (globo) ---------- */
    .wa {
      position: fixed; right: 1.1rem; bottom: 1.4rem; z-index: 36;
      display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px;
      background: var(--white); color: var(--brand-blue); border-radius: 50%; text-decoration: none;
      box-shadow: 0 14px 28px -10px rgba(0,0,0,0.6), 0 3px 6px rgba(0,0,0,0.3);
      opacity: 0; transform: translateY(14px) scale(0.6); transform-origin: 100% 100%; pointer-events: none;
      transition: opacity 300ms var(--ease), transform 300ms var(--ease);
    }
    .wa::after { content: ""; position: absolute; right: 9px; bottom: -6px; width: 16px; height: 16px; background: var(--white); border-radius: 0 0 5px 0; transform: rotate(45deg); z-index: -1; }
    .wa.show { opacity: 1; transform: none; pointer-events: auto; }
    .wa .ic { width: 30px; height: 30px; stroke-width: 1.7; }
    .wa:active { transform: scale(0.94); }
    .wa-tip { position: absolute; right: calc(100% + 12px); top: 50%; padding: 0.55rem 0.85rem; background: var(--white); color: var(--brand-blue); border-radius: 10px; font: 700 0.9rem/1 var(--sign-font); white-space: nowrap; opacity: 0; transform: translateY(-50%) translateX(6px); pointer-events: none; transition: opacity 160ms var(--ease), transform 160ms var(--ease); box-shadow: 0 10px 20px -10px rgba(0,0,0,0.55); }
    .wa:focus-visible .wa-tip { opacity: 1; transform: translateY(-50%); }
    @media (hover: hover) and (pointer: fine) { .wa:hover .wa-tip { opacity: 1; transform: translateY(-50%); } }
    .fab { right: auto; left: 1rem; }
    @media (max-width: 1179px) { .wa { bottom: 1rem; } }

    /* ---------- LIGHTBOX ---------- */
    #lightbox { display: none; position: fixed; inset: 0; z-index: 90; background: rgba(35,21,11,0.96); align-items: center; justify-content: center; padding: 3.5rem 1rem 1rem; --focus: #fff; }
    #lightbox.open { display: flex; }
    #lightbox img { max-width: min(96vw, 1400px); max-height: calc(100svh - 5.5rem); object-fit: contain; border-radius: 3px; }
    .lb-btn { position: absolute; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; background: var(--white); color: var(--ink); border: 0; border-radius: 12px; }
    .lb-close { top: 0.75rem; right: 0.75rem; }
    .lb-prev { left: 0.75rem; top: 50%; margin-top: -26px; }
    .lb-prev .ic { transform: rotate(180deg); }
    .lb-next { right: 0.75rem; top: 50%; margin-top: -26px; }
    @media (max-width: 700px) { .lb-prev, .lb-next { top: auto; bottom: 0.75rem; margin-top: 0; } }

    /* ---------- REVEAL ---------- */
    .js .rv { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
    .js .rv.in { opacity: 1; transform: none; }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .wa { transition: none; }
      .hero-sign::after { animation: none; display: none; }
      .js .rv, .js .step > * { opacity: 1; transform: none; clip-path: none; transition: none; }
      .hito-n.roll { animation: none; }
      .slide { transition: none; }
      .ph img, .plate, .plate .ic { transition: none; }
    }


    /* ==========================================================
       CASAS DEL MAR · V1 REFRESH
       Alcance: misma estructura/layout; nueva paleta + hero limpio.
       ========================================================== */
    :root {
      --blue: #123F63;
      --blue-deep: #0B2B43;
      --white: #F8F5EF;       /* marfil */
      --concrete: #EEE2CF;    /* arena */
      --ink: #17201F;
      --ink-soft: #46504D;
      --amber: #A66D35;       /* madera/ocre */
      --amber-soft: #C58B4F;
      --brown-deep: #29180F;
      --on-blue-soft: rgba(248,245,239,0.84);
    }

    body { background: var(--white); }

    /* Hero: misma composición, sin cartel azul. */
    #inicio .hero-shade {
      background: linear-gradient(to top, rgba(10,24,29,.66) 0%, rgba(10,24,29,.12) 56%, rgba(10,24,29,.46) 100%);
    }
    #inicio .hero-sign {
      max-width: 580px;
      overflow: visible;
      background: transparent;
      padding: 0;
      border-radius: 0;
      box-shadow: none;
    }
    #inicio .hero-sign::before,
    #inicio .hero-sign::after { display: none; }
    #inicio .hero-h { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.28); }
    #inicio .hero-sub { color: rgba(255,255,255,.9); }

    /* El hito KM deja de formar parte de la identidad visual. */
    .hito { display: none !important; }
    @media (min-width:1100px) { .wrap { padding-left: var(--gutter); } }

    /* Ritmo cromático por sección, sin alterar layout. */
    #nosotros,
    #proyectos,
    #proceso,
    #materiales,
    #contacto { background: var(--white); color: var(--ink); }

    #servicios,
    #renders,
    #llamada { background: var(--concrete); color: var(--ink); }

    #precios { background: var(--brown-deep); color: var(--white); }

    /* Secciones que antes estaban sobre azul ahora usan texto oscuro. */
    #servicios .lede,
    #renders .lede,
    #llamada .lede { color: var(--ink-soft); }
    #servicios .sq,
    #renders .sq,
    #llamada .sq { border-color: rgba(23,32,31,.28); color: var(--ink); background: var(--white); }

    /* Detalles cálidos, manteniendo azul como identidad/acción. */
    #servicios .svc-t .ic { color: var(--amber); }
    #servicios .svc { border-color: rgba(23,32,31,.18); }
    #renders .strip-head { color: var(--ink); }

    /* Proceso: sin señalética SALIDA; se conserva la estructura existente. */
    #proceso .step h3 { color: var(--brand-blue); }
    #proceso .road { background-color: var(--amber); }

    /* CTA arena: controles legibles sin convertir la sección en un bloque azul. */
    #llamada .desvio { color: var(--ink); border-color: rgba(23,32,31,.28); }
    #llamada .scarce { color: var(--ink-soft); }

    /* Footer: recupera el azul como cierre de marca. */
    footer { background: var(--blue-deep) !important; color: var(--white); }



    /* ==========================================================
       CASAS DEL MAR · V2 COMPOSICIÓN
       Conserva estructura/contenido; ajusta jerarquía y presentación.
       ========================================================== */
    .h-sign { font-size: clamp(1.8rem, 3.3vw, 2.65rem); line-height: 1.05; }

    /* Header: transparente sobre hero; marfil al hacer scroll. */
    #navbar.scrolled, #navbar.is-scrolled, #navbar.stuck { background: rgba(248,245,239,.96) !important; color: var(--blue-deep) !important; }
    #navbar.scrolled .nav-links a, #navbar.scrolled .brand,
    #navbar.is-scrolled .nav-links a, #navbar.is-scrolled .brand,
    #navbar.stuck .nav-links a, #navbar.stuck .brand { color: var(--blue-deep) !important; }

    /* Hero: eliminar restos del cartel/señalética. */
    #inicio .hero-sign { margin-left: 0 !important; padding-left: 0 !important; }
    #inicio .hero-sub::before { display:none !important; content:none !important; }

    /* Nosotros: más presencia para el video + estadísticas. */
    .about-video { width:100%; max-width:none; }
    @media (min-width:900px){ .about { grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(2.5rem,5vw,5rem); } }
    #nosotros .h-sign { color:var(--brand-blue); max-width:15ch; }
    .about-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:2rem; border-top:1px solid rgba(23,32,31,.24); border-bottom:1px solid rgba(23,32,31,.24); }
    .about-stats>div { padding:1.25rem 1rem 1.25rem 0; }
    .about-stats>div+div { padding-left:1.25rem; border-left:1px solid rgba(23,32,31,.18); }
    .about-stats strong { display:block; color:var(--brand-blue); font:800 clamp(1.65rem,3vw,2.5rem)/1 var(--sign-font); }
    .about-stats span { display:block; margin-top:.4rem; color:var(--ink-soft); font-size:.88rem; }
    @media(max-width:650px){ .about-stats { grid-template-columns:1fr; } .about-stats>div+div { padding-left:0; border-left:0; border-top:1px solid rgba(23,32,31,.18); } }

    /* Servicios: sin caja exterior, texto oscuro e iconografía con más peso. */
    #servicios .svc-list { border:0; border-radius:0; padding:0; }
    #servicios .svc, #servicios .svc p, #servicios .svc h3 { color:var(--ink) !important; }
    #servicios .svc-t .ic { stroke-width:2.4; width:30px; height:30px; }
    @media(min-width:900px){
      #servicios .svc-list { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
      #servicios .svc { display:block; padding:1rem 1.5rem; border-bottom:0; border-left:1px solid rgba(23,32,31,.18); }
      #servicios .svc:first-child { border-left:0; padding-left:0; }
      #servicios .svc:last-child { padding-right:0; }
      #servicios .svc-t { display:block; }
      #servicios .svc-t h3 { margin-top:.8rem; }
    }

    /* Obras: más muestra visible y Proyectos técnicos integrado, no cartel azul. */
    #proyectos .mosaic { grid-auto-rows:clamp(115px,14vw,200px); }
    #proyectos .mosaic .ph:nth-child(n+6) { grid-column:span 3; grid-row:span 1; }
    #proyectos .more-row { align-items:start; }
    #proyectos .dest.sign { background:var(--concrete) !important; color:var(--ink) !important; box-shadow:none; border:1px solid rgba(23,32,31,.16); border-radius:4px; }
    #proyectos .dest.sign h3 { color:var(--brand-blue); }
    #proyectos .dest.sign a { color:var(--ink) !important; border-color:rgba(23,32,31,.14) !important; }
    #proyectos .dest.sign .ic { color:var(--amber); }

    /* Proceso: secuencia editorial, sin carretera. */
    #proceso .road-wrap { margin-top:2rem; padding-left:0; }
    #proceso .road { display:none !important; }
    #proceso .steps { counter-reset:cdmstep; }
    #proceso .step { counter-increment:cdmstep; position:relative; padding-left:4.25rem; border-left:1px solid rgba(23,32,31,.22); }
    #proceso .step::before { content:counter(cdmstep, decimal-leading-zero); position:absolute; left:0; top:0; width:3rem; color:var(--amber); font:800 1.15rem/1 var(--sign-font); }
    #proceso .step h3 { color:var(--brand-blue); }
    @media(min-width:900px){
      #proceso .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:2.25rem 2rem; }
      #proceso .step { padding:3.4rem 0 0; border-left:0; border-top:1px solid rgba(23,32,31,.22); }
      #proceso .step::before { top:1rem; left:0; }
    }

    /* Precio: tarjeta integrada al marrón, sin azul. */
    #precios .plate-price.sign { background:rgba(255,255,255,.055) !important; border:1px solid rgba(248,245,239,.34); box-shadow:none; }
    #precios .plate-price .claim { font-size:clamp(1.35rem,2.4vw,1.9rem); }

    /* Materiales: sistema limpio, sin marcador aislado. */
    #materiales .spec dt::before, #materiales .spec dt::after { display:none !important; content:none !important; }

    /* Llamada: mantener Reforma / Casa nueva / Proyecto amplio; arreglar contraste y consistencia. */
    #llamada .h-sign, #llamada .ask, #llamada .desvio strong, #llamada .desvio em { color:var(--ink) !important; }
    #llamada .desvios { gap:0; border-top:1px solid rgba(23,32,31,.22); border-bottom:1px solid rgba(23,32,31,.22); }
    #llamada .desvio { background:transparent; border:0; border-bottom:1px solid rgba(23,32,31,.16); border-radius:0; padding:1.1rem 0; }
    #llamada .desvio:last-child { border-bottom:0; }
    #llamada .desvio .ic { color:var(--brand-blue); }
    @media(min-width:900px){
      #llamada .desvios { grid-template-columns:repeat(3,1fr); }
      #llamada .desvio { border-bottom:0; border-right:1px solid rgba(23,32,31,.16); padding:1.2rem 1.35rem; }
      #llamada .desvio:first-child { padding-left:0; }
      #llamada .desvio:last-child { border-right:0; }
    }


    /* ==========================================================
       CASAS DEL MAR · V3 AJUSTES DE COMPOSICIÓN
       ========================================================== */
    /* Jerarquía general: H2 visibles, sin competir con el hero. */
    .h-sign { font-size: clamp(2rem, 3vw, 2.75rem) !important; line-height: 1.02; letter-spacing:-.025em; }
    section { scroll-margin-top: -10px; }

    /* HERO: texto realmente libre sobre la foto. */
    #inicio .hero-sign {
      margin-left:0 !important; padding:0 !important; background:transparent !important;
      border:0 !important; box-shadow:none !important; border-radius:0 !important;
    }
    #inicio .hero-sub { gap:0 !important; }
    #inicio .hero-sub > .ic { display:none !important; }
    #inicio .hero-h { margin-left:0 !important; padding-left:0 !important; }

    /* NOSOTROS: video menos dominante y título con tamaño útil. */
    #nosotros .h-sign { font-size:clamp(2.15rem,3.2vw,2.9rem) !important; max-width:18ch; }
    @media (min-width:900px){
      #nosotros .about { grid-template-columns:minmax(280px, 4.2fr) minmax(0, 7.8fr); gap:clamp(2.75rem,5vw,5.5rem); align-items:center; }
      #nosotros .about-video { max-width:390px; justify-self:start; }
      #nosotros .about-video video { width:100%; height:430px; object-fit:cover; }
    }
    .about-stats { margin-top:2.25rem; }
    .about-stats strong { font-size:clamp(1.85rem,3vw,2.6rem); }

    /* SERVICIOS: H2 con presencia, subtítulos controlados e iconos más sólidos. */
    #servicios .h-sign { margin-bottom:1.8rem; }
    #servicios .svc-t h3 { font-size:1.08rem !important; line-height:1.15; }
    #servicios .svc p { font-size:.94rem; line-height:1.55; }
    #servicios .svc-t .ic { width:34px; height:34px; stroke-width:3.2 !important; color:var(--amber); }

    /* OBRAS: galería primero; acciones y proyectos técnicos como franja editorial inferior. */
    #proyectos .obras-head { margin-bottom:1.5rem; }
    #proyectos .more-row { display:grid !important; grid-template-columns:1fr !important; gap:1.5rem !important; margin-top:1.75rem; }
    #proyectos .more-row > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.15rem 0; border-top:1px solid rgba(23,32,31,.18); border-bottom:1px solid rgba(23,32,31,.18); }
    #proyectos .more-row > div:first-child h3 { margin:0 0 .25rem; font-size:1.15rem; }
    #proyectos .more-row > div:first-child p { margin:0; }
    #proyectos .dest.sign { width:100%; padding:1.4rem 1.5rem !important; }
    #proyectos .dest.sign h3 { margin:0 0 1rem; font-size:1.15rem; }
    #proyectos .dest.sign ul { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 1.5rem; }
    #proyectos .dest.sign li { border-top:1px solid rgba(23,32,31,.13); }
    #proyectos .dest.sign a { min-height:44px; display:flex; align-items:center; justify-content:space-between; }
    @media(max-width:760px){
      #proyectos .more-row > div:first-child { align-items:flex-start; flex-direction:column; }
      #proyectos .dest.sign ul { grid-template-columns:1fr; }
    }

    /* PROCESO: 3 columnas x 2 filas, título arriba y texto alineado debajo. */
    #proceso .road-wrap { margin-top:1.75rem; }
    #proceso .steps { gap:2.5rem 2.25rem !important; }
    #proceso .step { display:grid; grid-template-rows:auto auto 1fr; align-content:start; }
    #proceso .step::before { position:static !important; display:block; width:auto !important; margin-bottom:.75rem; }
    #proceso .step h3 { margin:0 0 .8rem !important; min-height:2.35em; font-size:1.12rem !important; line-height:1.15; }
    #proceso .step p { margin:0 !important; line-height:1.55; }
    @media(min-width:900px){
      #proceso .step { padding:1.1rem 0 0 !important; border-top:1px solid rgba(23,32,31,.22) !important; }
    }

    /* PRECIOS: tarjeta secundaria, no protagonista. */
    #precios .plate-price.sign { background:rgba(255,255,255,.06) !important; border-color:rgba(248,245,239,.24) !important; }
    #precios .plate-price .claim { font-size:clamp(1.15rem,1.7vw,1.5rem) !important; line-height:1.18; }

    /* MATERIALES: sin marcador aislado; CTA integrado a la paleta cálida. */
    #materiales .wood-dot { display:none !important; }
    #materiales .plate--blue { background:var(--brown-deep) !important; color:var(--white) !important; }
    #materiales .spec dt { padding-left:0 !important; }

    /* LLAMADA: dos zonas claras + tres botones independientes. */
    #llamada .wrap { display:grid; grid-template-columns:minmax(0, .85fr) minmax(0, 1.35fr); gap:clamp(2.5rem,6vw,6rem); align-items:start; }
    #llamada .call-head { grid-column:1; grid-row:1 / span 2; }
    #llamada .ask { grid-column:2; margin:0 0 1rem !important; font-size:1.18rem; line-height:1.3; }
    #llamada .desvios { grid-column:2; display:grid; grid-template-columns:1fr !important; gap:.85rem !important; border:0 !important; }
    #llamada .desvio { min-height:82px; padding:1rem 1.15rem !important; border:1px solid rgba(23,32,31,.28) !important; border-radius:10px !important; background:rgba(255,255,255,.28) !important; }
    #llamada .desvio strong { font-size:1.05rem !important; }
    #llamada .desvio em { font-size:.9rem !important; color:var(--ink-soft) !important; }
    #llamada .desvio .ic { width:1.4rem; height:1.4rem; color:var(--brand-blue) !important; }
    #llamada .scarce { margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid rgba(23,32,31,.2); max-width:34ch; }
    @media(max-width:820px){
      #llamada .wrap { grid-template-columns:1fr; gap:1.75rem; }
      #llamada .call-head, #llamada .ask, #llamada .desvios { grid-column:1; grid-row:auto; }
      #llamada .ask { margin-top:.5rem !important; }
    }



/* ==========================================================
   CASAS DEL MAR · V4 — UNIFICACIÓN VISUAL Y JERARQUÍA
   ========================================================== */
:root{
  --cdm-primary:#245F87;
  --cdm-primary-deep:#1C4E70;
  --cdm-warm:#245F87;
  --cdm-cream:#FCFAF6;
  --cdm-sand:#EDE4D3;
  --cdm-brown:#23160E;
  --cdm-ink:#23160E;
  --cdm-muted:#665C54;
}
/* Jerarquía común */
.h-sign{font-size:clamp(2.55rem,4.1vw,3.65rem)!important;line-height:1.02!important;letter-spacing:-.035em!important;margin-bottom:1.25rem!important;color:var(--cdm-primary)!important}
#precios .h-sign{color:#fff!important}
#renders .h-sign{color:var(--cdm-ink)!important}
#llamada .h-sign{color:var(--cdm-ink)!important}
.plate--blue,.nav-cta .plate,#contacto button[type=submit],#materiales .plate--blue{background:var(--cdm-primary)!important;color:#fff!important;border-color:var(--cdm-primary)!important}
.plate--blue:hover,.nav-cta .plate:hover,#contacto button[type=submit]:hover,#materiales .plate--blue:hover{background:var(--cdm-primary-deep)!important;border-color:var(--cdm-primary-deep)!important}
footer{background:var(--cdm-primary-deep)!important}

/* HERO */
#inicio .hero-in{padding-left:0!important}
#inicio .hero-sign,#inicio .hero-h{padding-left:0!important;margin-left:0!important}
#inicio .hero-sub>.ic{display:none!important}
#inicio .hero-sub .logo-plate{display:none!important}
#inicio .hero-sub{padding-left:0!important;margin-left:0!important}
@media(max-width:1180px){#inicio .hero-in{padding-left:var(--gutter)!important}}

/* NOSOTROS: video iguala altura visual del bloque de contenido */
#nosotros .about{align-items:stretch!important}
#nosotros .about-copy{display:flex;flex-direction:column;justify-content:center}
#nosotros .h-sign{font-size:clamp(2.55rem,4vw,3.55rem)!important;max-width:17ch!important}
@media(min-width:900px){
 #nosotros .about{grid-template-columns:minmax(330px,5fr) minmax(0,7fr)!important;gap:clamp(2.5rem,5vw,5rem)!important}
 #nosotros .about-video{max-width:none!important;width:100%!important;height:100%!important;min-height:500px!important;align-self:stretch!important}
 #nosotros .about-video video{width:100%!important;height:100%!important;min-height:500px!important;object-fit:cover!important}
}
.about-stats{margin-top:1.8rem!important}

/* SERVICIOS */
#servicios .h-sign{font-size:clamp(2.55rem,4vw,3.5rem)!important}
#servicios .svc-t h3{font-size:clamp(1.28rem,1.7vw,1.55rem)!important;line-height:1.12!important;margin-top:.9rem!important}
#servicios .svc p{font-size:.96rem!important;line-height:1.5!important;color:var(--cdm-ink)!important}
#servicios .svc-t .ic{width:38px!important;height:38px!important;stroke-width:3.6!important;color:var(--cdm-warm)!important}

/* OBRAS: solo CTA debajo de la galería */
#proyectos .h-sign{font-size:clamp(2.55rem,4vw,3.5rem)!important}
#proyectos .more-row{display:block!important;margin-top:1.5rem!important}
#proyectos .works-cta{display:block!important;border:0!important;padding:0!important}
#proyectos .works-cta .plate{display:inline-flex!important}

/* RENDERS + proyectos técnicos, ahora en el mismo universo de diseño/proyecto */
#renders{padding-bottom:clamp(3rem,6vw,5rem)!important}
#renders .h-sign{font-size:clamp(2.55rem,4vw,3.5rem)!important}
#renders .tech-wrap{margin-top:2.25rem;display:grid;grid-template-columns:minmax(190px,.7fr) minmax(0,2.3fr);gap:2.5rem;align-items:start}
#renders .tech-intro h3{font:800 1.35rem/1.15 var(--sign-font);margin:0 0 .45rem;color:var(--cdm-ink)}
#renders .tech-intro p{margin:0;color:var(--cdm-muted);line-height:1.5}
#renders .tech-projects{background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important;color:var(--cdm-ink)!important}
#renders .tech-projects ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.5rem;margin:0;padding:0}
#renders .tech-projects li{border-top:1px solid rgba(23,32,31,.18)!important}
#renders .tech-projects a{min-height:44px;display:flex;align-items:center;justify-content:space-between;color:var(--cdm-ink)!important;border:0!important}
#renders .tech-projects .ic{color:var(--cdm-warm)!important}
@media(max-width:760px){#renders .tech-wrap{grid-template-columns:1fr;gap:1.25rem}#renders .tech-projects ul{grid-template-columns:1fr}}

/* PROCESO: 3x2, sin líneas; número + título en una línea */
#proceso .h-sign{font-size:clamp(2.55rem,4vw,3.5rem)!important}
#proceso .steps{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:3rem 3.25rem!important}
#proceso .step{display:grid!important;grid-template-columns:auto 1fr!important;grid-template-rows:auto 1fr!important;column-gap:.7rem!important;row-gap:.75rem!important;padding:0!important;border:0!important}
#proceso .step::before{grid-column:1!important;grid-row:1!important;position:static!important;margin:0!important;width:auto!important;font-size:1.35rem!important;line-height:1.05!important;color:var(--cdm-warm)!important}
#proceso .step h3{grid-column:2!important;grid-row:1!important;margin:0!important;min-height:0!important;font-size:1.32rem!important;line-height:1.05!important;color:var(--cdm-primary)!important}
#proceso .step p{grid-column:1 / -1!important;grid-row:2!important;margin:0!important;font-size:.96rem!important;line-height:1.55!important;color:var(--cdm-muted)!important}
@media(max-width:820px){#proceso .steps{grid-template-columns:1fr!important;gap:2rem!important}}

/* PRECIOS: dos columnas equilibradas de igual presencia */
#precios .price{align-items:stretch!important;grid-template-columns:1fr 1fr!important;gap:clamp(2.5rem,5vw,5rem)!important}
#precios .price>div{height:100%}
#precios .signs{display:flex!important}
#precios .plate-price.sign{width:100%!important;min-height:100%!important;display:flex!important;flex-direction:column!important;justify-content:center!important;padding:clamp(2rem,4vw,3.5rem)!important;background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.22)!important}
#precios .plate-price .claim{font-size:clamp(1.75rem,2.8vw,2.55rem)!important;line-height:1.08!important;margin-bottom:1.25rem!important}
#precios .plate-price .note{font-size:.96rem!important;line-height:1.55!important;max-width:44ch}
@media(max-width:760px){#precios .price{grid-template-columns:1fr!important}}

/* MATERIALES: menos ruido visual, misma información */
#materiales .h-sign{font-size:clamp(2.55rem,4vw,3.5rem)!important}
#materiales .spec{border-top:0!important}
#materiales .spec>div:first-child{border-top:0!important}
#materiales .mat-copy .lede{font-size:.96rem!important;line-height:1.55!important}
#materiales .spec dt{font-size:.92rem!important}
#materiales .spec dd{font-size:.9rem!important;line-height:1.45!important}
@media(min-width:900px){#materiales .spec{display:grid;grid-template-columns:1fr 1fr;gap:0 1.75rem}#materiales .spec>div{align-content:start}}

/* LLAMADA: pregunta cerca de los botones y botones claramente separados */
#llamada .h-sign{font-size:clamp(2.55rem,4vw,3.5rem)!important}
#llamada .wrap{grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr)!important;gap:clamp(2.5rem,5vw,5rem)!important}
#llamada .ask{margin:0 0 .65rem!important;font-size:1.28rem!important;font-weight:800!important}
#llamada .desvios{gap:.7rem!important}
#llamada .desvio{min-height:76px!important;background:rgba(255,255,255,.38)!important;border:1px solid rgba(23,32,31,.22)!important;border-radius:8px!important;padding:1rem 1.1rem!important}
#llamada .desvio .ic{width:1.25rem!important;height:1.25rem!important;color:var(--cdm-primary)!important}
@media(max-width:820px){#llamada .wrap{grid-template-columns:1fr!important}}

/* CONTACTO */
#contacto .h-sign{font-size:clamp(2.55rem,4vw,3.5rem)!important}
#contacto button[type=submit]{background:var(--cdm-primary)!important;color:#fff!important}


/* ==========================================================
   BRAND SYSTEM / FINAL COLOR ASSIGNMENTS
   ========================================================== */

:root{--brand-cream:#EDE4D3;--brand-brown:#23160E;--brand-blue:#245F87;--brand-white:#FCFAF6;--brand-muted:#665C54;--brand-blue-hover:#1C4E70}
/* Brand roles: brown = reading/hierarchy, blue = action/accent, cream = warm alternate */
body{background:var(--brand-white)!important;color:var(--brand-brown)!important}
.h-sign,#nosotros .h-sign,#servicios .h-sign,#proyectos .h-sign,#renders .h-sign,#proceso .h-sign,#materiales .h-sign,#llamada .h-sign,#contacto .h-sign{color:var(--brand-brown)!important}
.lede,#nosotros p,#proyectos p,#renders p,#proceso .step p,#materiales p,#llamada p,#contacto p{color:var(--brand-muted)}
/* alternate section backgrounds */
#nosotros,#proyectos,#proceso,#materiales,#contacto{background:var(--brand-white)!important;color:var(--brand-brown)!important}
#servicios,#renders,#llamada{background:var(--brand-cream)!important;color:var(--brand-brown)!important}
/* services: no blue mass, blue only icon accent */
#servicios .svc,#servicios .svc h3,#servicios .svc p{color:var(--brand-brown)!important}
#servicios .svc-t .ic{color:var(--brand-blue)!important}
/* stats and process numbers are accents; titles remain brown */
.about-stats strong,#proceso .step::before{color:var(--brand-blue)!important}
#proceso .step h3{color:var(--brand-brown)!important}
/* renders technical links */
#renders .tech-intro h3,#renders .tech-projects,#renders .tech-projects a{color:var(--brand-brown)!important}
#renders .tech-projects .ic{color:var(--brand-blue)!important}
/* dark price section derives from logo brown */
#precios{background:var(--brand-brown)!important;color:var(--brand-cream)!important}
#precios .h-sign,#precios h3,#precios p,#precios .claim,#precios .note{color:var(--brand-cream)!important}
#precios .plate-price.sign{background:rgba(237,228,211,.055)!important;border-color:rgba(237,228,211,.42)!important}
/* actions use brand blue only */
.plate--blue,#contacto button[type=submit],#materiales .plate--blue{background:var(--brand-blue)!important;border-color:var(--brand-blue)!important;color:#fff!important}
.plate--blue:hover,#contacto button[type=submit]:hover,#materiales .plate--blue:hover{background:var(--brand-blue-hover)!important;border-color:var(--brand-blue-hover)!important}
#llamada .desvio .ic{color:var(--brand-blue)!important}
/* header: white CTA over hero; blue CTA after scroll */
#navbar:not(.scrolled):not(.is-scrolled):not(.stuck) .nav-cta .plate{background:#fff!important;color:var(--brand-blue)!important;border-color:#fff!important}
#navbar.scrolled,#navbar.is-scrolled,#navbar.stuck{background:rgba(252,250,246,.97)!important;color:var(--brand-brown)!important}
#navbar.scrolled .nav-links a,#navbar.scrolled .brand,#navbar.is-scrolled .nav-links a,#navbar.is-scrolled .brand,#navbar.stuck .nav-links a,#navbar.stuck .brand{color:var(--brand-brown)!important}
#navbar.scrolled .nav-cta .plate,#navbar.is-scrolled .nav-cta .plate,#navbar.stuck .nav-cta .plate{background:var(--brand-blue)!important;color:#fff!important;border-color:var(--brand-blue)!important}
/* carousel controls: neutral, not blue blocks */
#renders .sq{background:var(--brand-white)!important;color:var(--brand-brown)!important;border-color:rgba(35,22,14,.35)!important}
#renders .sq:hover{background:var(--brand-brown)!important;color:var(--brand-cream)!important}
/* footer closes in logo brown; blue remains accent, not a large field */
footer{background:var(--brand-brown)!important;color:var(--brand-cream)!important}
footer h3,footer p,footer a,footer .brand{color:var(--brand-cream)!important}
footer .plate{background:var(--brand-cream)!important;color:var(--brand-brown)!important}


/* ==========================================================
   APPROVED COMPONENT LAYOUTS
   Header, Services, Renders, Process, Prices, Materials, Agenda, Contact, Footer
   ========================================================== */

/* Implementación cerrada sobre V4: sin cambios al hero */
:root{--brand-cream:#EDE4D3;--brand-brown:#23160E;--brand-blue:#245F87;--brand-white:#FCFAF6;--brand-muted:#665C54}

/* HEADER: logo horizontal blanco sobre hero, color al scroll; CTA blanco -> azul */
#navbar .brand{min-width:170px}
#navbar .brand-logo{display:block;width:clamp(145px,14vw,190px);line-height:0}
#navbar .brand-logo img{display:block;width:100%;height:auto;filter:brightness(0) invert(1);transition:filter .22s ease}
#navbar.scrolled .brand-logo img,#navbar.is-scrolled .brand-logo img,#navbar.stuck .brand-logo img{filter:none}
#navbar:not(.scrolled):not(.is-scrolled):not(.stuck) .nav-cta .plate{background:#fff!important;color:var(--brand-blue)!important;border-color:#fff!important}
#navbar.scrolled .nav-cta .plate,#navbar.is-scrolled .nav-cta .plate,#navbar.stuck .nav-cta .plate{background:var(--brand-blue)!important;color:#fff!important;border-color:var(--brand-blue)!important}

/* NOSOTROS: bloque más compacto; video acompaña la altura del contenido, sin ocupar 100% */
@media(min-width:900px){
 #nosotros .about{grid-template-columns:minmax(300px,430px) minmax(0,570px)!important;gap:clamp(2.5rem,5vw,4.75rem)!important;justify-content:center!important;align-items:center!important}
 #nosotros .about-video{width:100%!important;height:auto!important;min-height:0!important;align-self:center!important;aspect-ratio:4/5!important}
 #nosotros .about-video video{width:100%!important;height:100%!important;min-height:0!important;object-fit:cover!important}
}
#nosotros .about-stats{grid-template-columns:repeat(3,1fr)!important}

/* SERVICIOS: cuatro filas editoriales, iconos azules robustos */
#servicios .svc-list{margin-top:2rem!important;padding:0!important;border:0!important;border-radius:0!important}
#servicios .svc{display:grid!important;grid-template-columns:minmax(250px,4fr) minmax(0,7fr)!important;gap:clamp(2rem,5vw,5rem)!important;align-items:center!important;padding:1.45rem 0!important;border-bottom:1px solid rgba(35,22,14,.22)!important}
#servicios .svc:first-child{border-top:1px solid rgba(35,22,14,.22)!important}
#servicios .svc-t{gap:1rem!important}
#servicios .svc-t .ic{width:42px!important;height:42px!important;stroke-width:3.4!important;color:var(--brand-blue)!important}
#servicios .svc-t h3{margin:0!important;color:var(--brand-brown)!important;font-size:clamp(1.3rem,1.8vw,1.65rem)!important}
#servicios .svc p{margin:0!important;color:var(--brand-muted)!important;max-width:60ch!important;font-size:1rem!important}
@media(max-width:760px){#servicios .svc{grid-template-columns:1fr!important;gap:.65rem!important}}

/* OBRAS: bajada en una línea cuando hay ancho disponible */
@media(min-width:800px){#proyectos .obras-head .lede{white-space:nowrap!important;max-width:none!important}}

/* RENDERS: primera imagen alineada al mismo eje que título; altura intacta */
.strip{padding-left:var(--edge)!important;scroll-padding-left:var(--edge)!important}
@media(min-width:1100px){.strip{padding-left:var(--edge)!important;scroll-padding-left:var(--edge)!important}}
#strip-prev .ic{transform:none!important}
/* Proyectos técnicos: sin marco/radius; separadores a ancho completo */
#renders .tech-projects{border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;background:transparent!important}
#renders .tech-projects::before{display:none!important;content:none!important}
#renders .tech-projects ul{padding:0!important;margin:0!important}
#renders .tech-projects li{border-radius:0!important}

/* PROCESO: vuelve a secuencia vertical editorial; sin ruta */
#proceso .road-wrap{margin-top:2.5rem!important;padding-left:0!important}
#proceso .road,#proceso .road-wrap::before,#proceso .road-wrap::after{display:none!important}
#proceso .steps{counter-reset:cdmstep!important;display:grid!important;grid-template-columns:1fr!important;gap:0!important}
#proceso .step{counter-increment:cdmstep!important;display:grid!important;grid-template-columns:minmax(260px,4fr) minmax(0,7fr)!important;grid-template-rows:auto!important;gap:clamp(2rem,5vw,5rem)!important;align-items:start!important;padding:1.55rem 0!important;border-top:1px solid rgba(35,22,14,.2)!important}
#proceso .step:last-child{border-bottom:1px solid rgba(35,22,14,.2)!important}
#proceso .step::before{content:counter(cdmstep,decimal-leading-zero)!important;position:static!important;grid-column:1!important;grid-row:1!important;width:auto!important;height:auto!important;background:none!important;color:var(--brand-blue)!important;font:800 clamp(1.35rem,2vw,1.75rem)/1 var(--sign-font)!important;margin:0!important}
#proceso .step h3{grid-column:1!important;grid-row:1!important;margin:0 0 0 clamp(2.7rem,4vw,3.6rem)!important;color:var(--brand-brown)!important;font-size:clamp(1.35rem,2vw,1.75rem)!important;line-height:1!important;min-height:0!important}
#proceso .step p{grid-column:2!important;grid-row:1!important;margin:0!important;color:var(--brand-muted)!important;font-size:1rem!important;line-height:1.55!important;max-width:62ch!important}
@media(max-width:760px){#proceso .step{grid-template-columns:1fr!important;gap:.8rem!important}#proceso .step p{grid-column:1!important;grid-row:2!important}}

/* PRECIOS Y PAGOS: fondo plano de marca, sin textura */
#precios{background:var(--brand-brown)!important;background-image:none!important}

/* MATERIALES: exactamente dos columnas totales; lista derecha en una columna */
@media(min-width:900px){#materiales .mat{grid-template-columns:minmax(0,5fr) minmax(0,7fr)!important;gap:5rem!important}#materiales .spec{display:block!important}}
#materiales .spec>div{display:grid!important;grid-template-columns:1fr!important;gap:.35rem!important;padding:1.05rem 0!important}
#materiales .spec dt{font-size:1rem!important;color:var(--brand-brown)!important}
#materiales .spec dd{font-size:.94rem!important;color:var(--brand-muted)!important;max-width:58ch!important}

/* AGENDA: pregunta y opciones juntas; aire superior/inferior equilibrado */
#llamada{padding-top:clamp(3.5rem,7vw,6rem)!important;padding-bottom:clamp(3.5rem,7vw,6rem)!important}
#llamada .ask{align-self:end!important;margin:0 0 .65rem!important}
#llamada .desvios{align-self:start!important}

/* CONTACTO: campos suaves y sin separadores en columna derecha */
#contacto .field input,#contacto .field textarea{border:1px solid rgba(35,22,14,.25)!important;border-radius:8px!important;box-shadow:none!important}
#contacto .field input:focus-visible,#contacto .field textarea:focus-visible{border-color:var(--brand-blue)!important;box-shadow:0 0 0 3px rgba(36,95,135,.14)!important}
#contacto .channels{border-top:0!important}
#contacto .channels li{border-bottom:0!important}

/* unidad cromática */
#servicios,#renders,#llamada{background:var(--brand-cream)!important;color:var(--brand-brown)!important}
#nosotros,#proyectos,#proceso,#materiales,#contacto{background:var(--brand-white)!important;color:var(--brand-brown)!important}
#nosotros .h-sign,#servicios .h-sign,#proyectos .h-sign,#renders .h-sign,#proceso .h-sign,#materiales .h-sign,#llamada .h-sign,#contacto .h-sign{color:var(--brand-brown)!important}


/* ==========================================================
   DESKTOP — FINAL POLISH
   ========================================================== */

@media (min-width:900px){
  /* Servicios: lista real en filas, sin heredar la grilla antigua de 4 columnas */
  #servicios .svc-list{display:block!important;width:100%!important;max-width:100%!important;margin:2rem 0 0!important}
  #servicios .svc{display:grid!important;grid-template-columns:minmax(250px,4fr) minmax(0,7fr)!important;width:100%!important;gap:clamp(2.5rem,5vw,5rem)!important;padding:1.3rem 0!important;margin:0!important}
  #servicios .svc-t{display:flex!important;align-items:center!important;min-width:0!important}
  #servicios .svc-t .ic{flex:0 0 34px!important;width:34px!important;height:34px!important;stroke-width:3.2!important}
  #servicios .svc-t h3{font-size:1.2rem!important;white-space:nowrap!important}
  #servicios .svc p{font-size:.98rem!important;line-height:1.45!important;max-width:none!important}

  /* Renders */
  #renders .strip-head .lede{white-space:nowrap!important;max-width:none!important}
  #renders .strip-btns .sq{border:0!important;box-shadow:none!important;background:var(--brand-white)!important}

  /* Proceso: número pegado al título, ambos como una sola cabecera visual */
  #proceso .step{grid-template-columns:minmax(270px,4fr) minmax(0,7fr)!important;gap:clamp(2rem,4vw,4rem)!important}
  #proceso .step::before{justify-self:start!important}
  #proceso .step h3{margin-left:2.15rem!important}

  /* Precios y pagos: proporciones y textos de la referencia aprobada */
  #precios .price{grid-template-columns:1fr 1.08fr!important;gap:clamp(4rem,7vw,7rem)!important;align-items:center!important}
  #precios .price-copy{display:flex!important;flex-direction:column!important;justify-content:center!important}
  #precios .price-copy .h-sign{font-size:clamp(2rem,3vw,3rem)!important;margin-bottom:1.45rem!important}
  #precios .price-text{font-size:1.05rem!important;line-height:1.55!important;color:var(--brand-cream)!important;margin-bottom:1.65rem!important}
  #precios .price-text p{margin:.2rem 0!important}
  #precios .price-copy>.plate{align-self:flex-start!important}
  #precios .plate-price.sign{min-height:0!important;height:auto!important;padding:clamp(2.2rem,4vw,3.5rem)!important;background:rgba(255,255,255,.055)!important;border:1px solid rgba(237,228,211,.34)!important}
  #precios .plate-price .claim{font-size:clamp(1.9rem,2.7vw,2.65rem)!important;line-height:1.08!important;margin:0 0 1.35rem!important}
  #precios .plate-price .note{font-size:1rem!important;line-height:1.45!important;color:var(--brand-cream)!important}

  /* Agenda: pregunta y botones forman un único bloque compacto */
  #llamada .wrap{grid-template-rows:auto auto!important;row-gap:0!important}
  #llamada .call-head{grid-column:1!important;grid-row:1 / span 2!important}
  #llamada .ask{grid-column:2!important;grid-row:1!important;align-self:end!important;margin:0 0 .65rem!important}
  #llamada .desvios{grid-column:2!important;grid-row:2!important;align-self:start!important;margin:0!important}

  /* Contacto: mapa usa exactamente el mismo borde visual que los inputs */
  #contacto .map{border:1px solid rgba(35,22,14,.25)!important;border-radius:8px!important;box-shadow:none!important}

  /* Footer: logo horizontal nuevo y CTA claro con azul de marca */
  footer .foot-brand{display:block!important;width:min(230px,100%)!important;line-height:0!important}
  footer .foot-brand img{display:block!important;width:100%!important;height:auto!important;filter:brightness(0) invert(1)!important}
  footer .foot>div:last-child>.plate{background:var(--brand-white)!important;color:var(--brand-blue)!important;border-color:var(--brand-white)!important}
  footer .foot>div:last-child>.plate .ic{color:var(--brand-blue)!important}
}


/* ==========================================================
   DESKTOP — MICRO ADJUSTMENTS
   ========================================================== */

@media (min-width:900px){
  /* Materiales: un poco más de jerarquía en los nombres de cada especificación */
  #materiales .spec dt{font-size:1.22rem!important;line-height:1.2!important;font-weight:700!important}

  /* Proceso: 01. / 02. y un poco más de aire antes del título */
  #proceso .step::before{content:counter(cdmstep,decimal-leading-zero) "."!important}
  #proceso .step h3{margin-left:3.15rem!important}

  /* Precios: sin el doble borde interior heredado de .sign */
  #precios .plate-price.sign::before{display:none!important;content:none!important}

  /* Footer: logo horizontal algo más contenido. Blanco sobre marrón es intencional. */
  footer .foot-brand{width:min(190px,100%)!important}
}


/* ==========================================================
   MOBILE — BASE ADJUSTMENTS
   ========================================================== */

@media (max-width:899px){
  /* Header: sin hito KM en mobile */
  .nav-km{display:none!important}

  /* H2 mobile: jerarquía más contenida */
  .h-sign,
  #nosotros .h-sign,#servicios .h-sign,#proyectos .h-sign,#renders .h-sign,
  #proceso .h-sign,#precios .h-sign,#materiales .h-sign,#llamada .h-sign,#contacto .h-sign{
    font-size:clamp(1.65rem,7vw,2rem)!important;
    line-height:1.05!important;
    letter-spacing:-.025em!important;
  }

  /* Menú mobile: misma lógica cromática clara del header scrolleado */
  #navbar.menu-open{background:rgba(252,250,246,.98)!important;color:var(--brand-brown)!important}
  #navbar.menu-open .brand-logo img{filter:none!important}
  #navbar.menu-open .menu-btn{color:var(--brand-brown)!important}
  #mobile-menu{background:var(--brand-white)!important;color:var(--brand-brown)!important;border-top:1px solid rgba(35,22,14,.14)!important}
  #mobile-menu li a{color:var(--brand-brown)!important;border-bottom:1px solid rgba(35,22,14,.16)!important}
  #mobile-menu li a .ic{color:var(--brand-blue)!important}
  #mobile-menu .plate{background:var(--brand-white)!important;color:var(--brand-blue)!important;border:1px solid rgba(36,95,135,.22)!important;box-shadow:0 8px 18px rgba(35,22,14,.10)!important}
  #mobile-menu .plate .ic{color:var(--brand-blue)!important}

  /* Renders: controles limpios, sin recuadro */
  #renders .strip-btns .sq{border:0!important;box-shadow:none!important;background:transparent!important}

  /* Proceso: misma notación y lógica que desktop */
  #proceso .step::before{content:counter(cdmstep,decimal-leading-zero) "."!important}
  #proceso .step h3{margin-left:3rem!important}

  /* Precios: eliminar el borde interno ::before */
  #precios .plate-price.sign::before{display:none!important;content:none!important}

  /* Materiales: títulos de especificaciones con más jerarquía */
  #materiales .spec dt{font-size:1.16rem!important;line-height:1.2!important;font-weight:700!important}

  /* Contacto: mapa con el mismo borde que los inputs */
  #contacto .map{border:1px solid rgba(35,22,14,.25)!important;border-radius:8px!important;box-shadow:none!important;overflow:hidden!important}

  /* Footer: misma lógica desktop */
  footer .foot-brand{display:block!important;width:min(150px,62vw)!important;line-height:0!important}
  footer .foot-brand img{display:block!important;width:100%!important;height:auto!important;filter:brightness(0) invert(1)!important}
  footer .foot>div:last-child>.plate{background:var(--brand-white)!important;color:var(--brand-blue)!important;border-color:var(--brand-white)!important}
  footer .foot>div:last-child>.plate .ic{color:var(--brand-blue)!important}
}


/* ==========================================================
   AGENDA CALLOUT + MOBILE ADJUSTMENTS
   ========================================================== */

/* Agenda response panel — shared desktop/mobile */
#llamada .call-out{margin-top:1rem!important}
#llamada .call-panel{background:var(--brand-white)!important;color:var(--brand-brown)!important;border:0!important;border-radius:10px!important;box-shadow:0 10px 24px rgba(35,22,14,.12)!important;padding:1.35rem 1.45rem!important;max-width:none!important}
#llamada .call-panel::before{display:none!important;content:none!important}
#llamada .call-panel p{color:var(--brand-muted)!important;margin:0 0 1rem!important}
#llamada .call-panel .plate{background:var(--brand-white)!important;color:var(--brand-blue)!important;border:1px solid rgba(36,95,135,.16)!important;box-shadow:0 6px 14px rgba(35,22,14,.08)!important}
#llamada .call-panel .plate .ic{color:var(--brand-blue)!important}
@media (min-width:900px){
  /* La respuesta pertenece a la elección: queda inmediatamente debajo de los tres botones */
  #llamada .call-out{grid-column:2!important;grid-row:3!important;align-self:start!important;margin-top:.9rem!important}
}
@media (max-width:899px){
  /* Header: una sola superficie clara y CTA azul, como desktop */
  #navbar,#navbar.scrolled,#navbar.menu-open{background:var(--brand-white)!important;color:var(--brand-brown)!important}
  #navbar .nav-in{background:transparent!important}
  #navbar .brand-logo img{filter:none!important}
  #navbar .menu-btn{color:var(--brand-brown)!important}
  #mobile-menu{background:var(--brand-white)!important;color:var(--brand-brown)!important}
  #mobile-menu .plate{background:var(--brand-blue)!important;color:var(--brand-white)!important;border-color:var(--brand-blue)!important}
  #mobile-menu .plate .ic{color:var(--brand-white)!important}

  /* H2: recuperamos presencia sin volver al tamaño excesivo inicial */
  .h-sign,#nosotros .h-sign,#servicios .h-sign,#proyectos .h-sign,#renders .h-sign,#proceso .h-sign,#precios .h-sign,#materiales .h-sign,#llamada .h-sign,#contacto .h-sign{
    font-size:clamp(1.9rem,8vw,2.3rem)!important;line-height:1.03!important
  }

  /* Datos de experiencia: apilados, centrados y sin divisores */
  #nosotros .about-stats{grid-template-columns:1fr!important;gap:.55rem!important;border:0!important;text-align:center!important;margin-top:1.5rem!important}
  #nosotros .about-stats>div,#nosotros .about-stats>div+div{padding:.25rem 0!important;border:0!important}
  #nosotros .about-stats strong{font-size:1.65rem!important;margin:0!important}
  #nosotros .about-stats span{margin-top:.12rem!important}

  /* Renders: mismo botón blanco sin borde que desktop */
  #renders .strip-btns .sq{background:var(--brand-white)!important;color:var(--brand-brown)!important;border:0!important;box-shadow:none!important}

  /* Respuesta agenda: debajo de las opciones y sin estética azul/cartel */
  #llamada .call-out{margin-top:1rem!important}
  #llamada .call-panel{padding:1.2rem!important}
}


/* ==========================================================
   MOBILE — HEADER + HERO FINAL STATE
   ========================================================== */

@media (max-width:899px){
  /* Recupera exactamente la lógica de header de V1: transparente sobre hero, claro al scroll/menu. */
  #navbar:not(.scrolled):not(.is-scrolled):not(.stuck):not(.menu-open){background:transparent!important;color:#fff!important;box-shadow:none!important}
  #navbar:not(.scrolled):not(.is-scrolled):not(.stuck):not(.menu-open) .brand-logo img{filter:brightness(0) invert(1)!important}
  #navbar:not(.scrolled):not(.is-scrolled):not(.stuck):not(.menu-open) .menu-btn{color:#fff!important}
  #navbar.scrolled,#navbar.is-scrolled,#navbar.stuck,#navbar.menu-open{background:var(--brand-white)!important;color:var(--brand-brown)!important}
  #navbar.scrolled .brand-logo img,#navbar.is-scrolled .brand-logo img,#navbar.stuck .brand-logo img,#navbar.menu-open .brand-logo img{filter:none!important}
  #navbar.scrolled .menu-btn,#navbar.is-scrolled .menu-btn,#navbar.stuck .menu-btn,#navbar.menu-open .menu-btn{color:var(--brand-brown)!important}

  /* En mobile el swipe/autoplay ya comunica carrusel; quitamos los indicadores del hero. */
  #inicio .dashes{display:none!important}
  #inicio .hero-in{padding-bottom:2.5rem!important}
}


/* ==========================================================
   MOBILE — FULLSCREEN MENU
   ========================================================== */

@media (max-width:1179px){
  #navbar.menu-open{height:100dvh!important;min-height:100vh!important;overflow:hidden!important;background:var(--brand-white)!important}
  #navbar.menu-open .nav-in{background:var(--brand-white)!important}
  #mobile-menu.open{display:flex!important;flex-direction:column!important;height:calc(100dvh - var(--nav-h, 72px))!important;min-height:calc(100vh - var(--nav-h, 72px))!important;overflow-y:auto!important;background:var(--brand-white)!important;padding-bottom:max(1.5rem,env(safe-area-inset-bottom))!important}
  #mobile-menu.open ul{flex:0 0 auto!important}
  #mobile-menu.open .plate{flex:0 0 auto!important}
  body.cdm-menu-open{overflow:hidden!important;touch-action:none!important}
}


/* ==========================================================
   SERVICES — FINAL TYPOGRAPHY / BORDERS
   ========================================================== */

@media (min-width:761px){
  #servicios .svc,
  #servicios .svc:first-child{
    border-left:0!important;
  }
  #servicios .svc-t h3{
    font-size:clamp(1.42rem,1.95vw,1.78rem)!important;
    line-height:1.15!important;
  }
}



/* Agenda response CTA — final contrast */
#llamada .call-panel .plate{
  background:var(--brand-blue)!important;
  color:var(--brand-white)!important;
  border-color:var(--brand-blue)!important;
  box-shadow:0 6px 14px rgba(35,22,14,.10)!important;
}
#llamada .call-panel .plate .ic{color:var(--brand-white)!important}

/* =========================================================
   FINAL SYSTEM — 2026-10-03
   Syne = display headings. Plus Jakarta Sans = reading/UI.
   This block replaces the temporary consolidation overrides.
   ========================================================= */

/* Type roles */
.hero-h,
.h-sign {
  font-family:var(--heading-font)!important;
  font-weight:600!important;
}

/* Main reading copy */
#nosotros .about-copy p,
#servicios .svc p,
#proyectos .lede,
#renders .lede,
#renders .tech-intro p,
#proceso .step p,
#precios .price-text p,
#precios .plate-price .note,
#materiales .mat-copy .lede,
#materiales .spec dd,
#llamada .call-head .lede,
#llamada .call-panel p,
#contacto .lede {
  font-family:var(--read-font)!important;
  font-size:1.0625rem!important;
  line-height:1.6!important;
}
#llamada .call-panel p {
  font-size:1rem!important;
}
/* Internal titles */
#servicios .svc-t h3,
#proceso .step h3 {
  font-family:var(--read-font)!important;
  font-size:1.5rem!important;
  line-height:1.15!important;
  font-weight:600!important;
}
#materiales .spec dt {
  font-family:var(--read-font)!important;
  font-size:1.25rem!important;
  line-height:1.2!important;
  font-weight:600!important;
}

/* Experience metrics */
#nosotros .about-stats{text-align:center!important}
#nosotros .about-stats>div{padding-inline:1rem!important}
#nosotros .about-stats strong{
  color:var(--brand-blue)!important;
  font-family:var(--read-font)!important;
  font-size:clamp(2.2rem,3.5vw,3rem)!important;
  font-weight:700!important;
  line-height:1!important;
}
#nosotros .about-stats strong .plus{
  display:inline-block;
  font-size:.68em;
  line-height:1;
  vertical-align:.12em;
  margin-right:.04em;
}
#nosotros .about-stats span{
  color:var(--brand-blue)!important;
  font-family:var(--read-font)!important;
  font-size:1rem!important;
  font-weight:600!important;
  line-height:1.35!important;
}

/* Projects and designs: three equal visual columns (intro + two link columns) */
#renders .tech-wrap{
  margin-top:2.25rem!important;
  display:grid!important;
  grid-template-columns:1fr 2fr!important;
  gap:clamp(2rem,4vw,3.5rem)!important;
  align-items:start!important;
}
#renders .tech-intro h3{
  margin:0 0 .65rem!important;
  color:var(--brand-brown)!important;
  font-family:var(--heading-font)!important;
  font-size:1.5rem!important;
  line-height:1.12!important;
  font-weight:600!important;
  text-transform:none!important;
  letter-spacing:-.02em!important;
}
#renders .tech-projects ul{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0 1.5rem!important;
}

/* Process: number and title align on the same baseline */
#proceso .step::before{
  font-size:1.5rem!important;
  line-height:1.15!important;
  align-self:baseline!important;
}
#proceso .step h3{
  align-self:baseline!important;
  margin-left:0!important;
}

/* Prices: robust two-column layout; no inherited height tricks */
#precios .price{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:clamp(3rem,6vw,6rem)!important;
  align-items:center!important;
}
#precios .price>div{height:auto!important;min-width:0!important}
#precios .price-copy{display:block!important}
#precios .price-copy .h-sign{margin-bottom:1.35rem!important}
#precios .price-text{margin-bottom:1.5rem!important}
#precios .price-text p{margin:.35rem 0!important;color:var(--brand-cream)!important}
#precios .signs{display:block!important;height:auto!important}
#precios .plate-price.sign{
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  display:block!important;
  padding:clamp(2rem,4vw,3.25rem)!important;
}
#precios .plate-price .claim{
  margin:0 0 1.15rem!important;
  font-size:clamp(1.55rem,2.4vw,2.25rem)!important;
  line-height:1.12!important;
}
#precios .plate-price .note{margin:0!important;max-width:46ch!important}

/* Materials */
#materiales .mat-copy .lede{
  font-size:1.0625rem!important;
  line-height:1.6!important;
}

/* Agenda panels keep the warm light surface on every viewport */
#llamada .desvios{align-items:start!important}
#llamada .call-choice{min-width:0!important}
#llamada .call-choice .desvio{width:100%!important}
#llamada .call-out{margin-top:.75rem!important}
#llamada .call-panel{
  background:var(--brand-white)!important;
  color:var(--brand-brown)!important;
  border:0!important;
  border-radius:10px!important;
  box-shadow:0 10px 24px rgba(35,22,14,.12)!important;
  padding:1.2rem!important;
}
#llamada .call-panel::before{display:none!important;content:none!important}
#llamada .call-panel .plate{
  background:var(--brand-blue)!important;
  color:var(--brand-white)!important;
  border-color:var(--brand-blue)!important;
}
#llamada .call-panel .plate .ic{color:var(--brand-white)!important}

/* Footer: compact logo column + wide copy column */
footer .foot{
  grid-template-columns:minmax(170px,220px) minmax(0,1fr)!important;
  gap:clamp(3rem,7vw,7rem)!important;
  align-items:start!important;
}
footer .foot-brand{width:min(190px,100%)!important}
footer .foot-cta{
  width:100%!important;
  max-width:760px!important;
  justify-self:start!important;
}
footer .foot-cta h3{
  font-family:var(--heading-font)!important;
  font-size:1.15rem!important;
  line-height:1.2!important;
  font-weight:600!important;
}
footer .foot-cta p{
  max-width:60ch!important;
  font-size:1.0625rem!important;
  line-height:1.6!important;
}
footer .foot-cta .plate{margin-top:1.35rem!important}

@media(max-width:899px){
  body{font-size:1rem}

  /* H1 remains as approved; H2 = 28px */
  .h-sign,
  #nosotros .h-sign,#servicios .h-sign,#proyectos .h-sign,#renders .h-sign,
  #proceso .h-sign,#precios .h-sign,#materiales .h-sign,#llamada .h-sign,#contacto .h-sign{
    font-size:1.75rem!important;
    line-height:1.08!important;
    font-weight:600!important;
  }

  #nosotros .about-copy p,
  #servicios .svc p,
  #proyectos .lede,
  #renders .lede,
  #renders .tech-intro p,
  #proceso .step p,
  #precios .price-text p,
  #precios .plate-price .note,
  #materiales .mat-copy .lede,
  #materiales .spec dd,
  #llamada .call-head .lede,
  #llamada .call-panel p,
  #contacto .lede{
    font-size:1rem!important;
    line-height:1.6!important;
  }

  #servicios .svc-t h3,
  #proceso .step h3,
  #materiales .spec dt{
    font-size:1.25rem!important;
    line-height:1.2!important;
    font-weight:600!important;
  }
  #proceso .step::before{font-size:1.25rem!important;line-height:1.2!important}
  #proceso .step h3{margin-left:0!important}

  #nosotros .about-stats{gap:.35rem!important;margin-top:1.5rem!important}
  #nosotros .about-stats>div,#nosotros .about-stats>div+div{padding:.5rem 0!important}
  #nosotros .about-stats strong{font-size:2.25rem!important}
  #nosotros .about-stats span{font-size:1rem!important;margin-top:.2rem!important}

  #renders .tech-wrap{grid-template-columns:1fr!important;gap:1.25rem!important}
  #renders .tech-intro h3{font-size:1.25rem!important}
  #renders .tech-projects ul{grid-template-columns:1fr!important}

  #precios .price{grid-template-columns:1fr!important;gap:2rem!important}
  #precios .plate-price.sign{padding:1.5rem!important}

  #materiales{background:#F6F1E8!important}
  #llamada .call-panel{background:var(--brand-white)!important}
  #llamada .desvios{grid-template-columns:1fr!important}
  #llamada .call-out{margin:.65rem 0 .35rem!important}

  footer .foot{grid-template-columns:1fr!important;gap:2rem!important}
  footer .foot-cta{max-width:100%!important}
}

/* =========================================================
   VISUAL TUNING — 2026-10-03 · pass 2
   ========================================================= */
/* Metrics */
#nosotros .about-stats strong .plus{font-size:.80em!important;vertical-align:.08em!important}
#nosotros .about-stats span{font-size:.93rem!important;font-weight:600!important;color:var(--brand-blue)!important}

/* Projects & designs */
#renders .tech-intro h3{font-family:var(--heading-font)!important;font-size:1.7rem!important;font-weight:600!important}
#renders .tech-projects .dest a,
#renders .tech-projects a{font-family:var(--sign-font)!important;font-size:1.05rem!important;font-weight:600!important}

/* Process: true number | title | copy grid */
#proceso .step{grid-template-columns:3.2rem minmax(190px,3.5fr) minmax(0,7fr)!important;column-gap:1.15rem!important;align-items:baseline!important}
#proceso .step::before{grid-column:1!important;grid-row:1!important;margin:0!important;align-self:baseline!important}
#proceso .step h3{grid-column:2!important;grid-row:1!important;margin:0!important;align-self:baseline!important}
#proceso .step p{grid-column:3!important;grid-row:1!important;align-self:start!important}

/* Price card: compact, readable, never forced */
#precios .price{align-items:center!important}
#precios .signs{height:auto!important;align-self:center!important}
#precios .plate-price.sign{min-height:0!important;height:auto!important;padding:2rem 2.15rem!important}
#precios .plate-price .claim{font-size:1.55rem!important;line-height:1.18!important;margin:0 0 1rem!important;text-wrap:balance!important}
#precios .plate-price .note{font-size:1rem!important;line-height:1.5!important}

/* Agenda spacing */
@media(min-width:900px){#llamada .ask{margin-bottom:1.75rem!important}}

/* Footer */
footer .foot-cta h3{font-family:var(--sign-font)!important;font-size:1.15rem!important;font-weight:600!important}
footer .foot-cta p{max-width:56ch!important}

@media(max-width:899px){
  #inicio .hero-h{font-size:2.5rem!important;line-height:.98!important}
  .h-sign, #nosotros .h-sign, #servicios .h-sign, #proyectos .h-sign, #renders .h-sign, #proceso .h-sign, #precios .h-sign, #materiales .h-sign, #llamada .h-sign, #contacto .h-sign {
    font-size:1.95rem!important;line-height:1.06!important
  }
  #nosotros .about-stats{gap:.7rem!important}
  #nosotros .about-stats>div,#nosotros .about-stats>div+div{padding:.7rem 0!important}
  #nosotros .about-stats span{font-size:.93rem!important}
  #renders .tech-intro h3{font-size:1.7rem!important}
  #proceso .step{grid-template-columns:2.65rem minmax(0,1fr)!important;grid-template-rows:auto auto!important;column-gap:.7rem!important;row-gap:.7rem!important;align-items:baseline!important}
  #proceso .step::before{grid-column:1!important;grid-row:1!important}
  #proceso .step h3{grid-column:2!important;grid-row:1!important;margin:0!important}
  #proceso .step p{grid-column:1 / -1!important;grid-row:2!important}
  #precios .plate-price.sign{padding:1.4rem!important}
  #precios .plate-price .claim{font-size:1.3rem!important;line-height:1.2!important}
  #llamada .ask{margin:.25rem 0 0 !important}
}

/* =========================================================
   VISUAL TUNING — 2026-10-03 · pass 3
   ========================================================= */
/* Stats: equal value/caption rows so Uruguay aligns with +10/+50 */
#nosotros .about-stats > div{
  display:grid!important;
  grid-template-rows:minmax(2.8rem,auto) auto!important;
  align-content:start!important;
  justify-items:center!important;
  text-align:center!important;
}
#nosotros .about-stats strong{
  display:flex!important;
  align-items:baseline!important;
  justify-content:center!important;
  min-height:2.8rem!important;
  line-height:1!important;
}
#nosotros .about-stats strong .plus{
  font-size:.82em!important;
  line-height:1!important;
  vertical-align:0!important;
  margin-right:.03em!important;
}

/* Services: icons support the label instead of competing with it */
@media(max-width:899px){
  #servicios .svc-t .ic{
    flex:0 0 18px!important;
    width:18px!important;
    height:18px!important;
    stroke-width:2.6!important;
  }
  #servicios .svc-t{gap:.7rem!important}
}

/* Price highlight: restore a clear, deliberate information card */
#precios .signs{
  display:flex!important;
  align-items:stretch!important;
  height:auto!important;
}
#precios .plate-price.sign{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  width:100%!important;
  min-height:230px!important;
  height:auto!important;
  padding:clamp(2rem,3.4vw,3rem)!important;
  border:1px solid rgba(237,228,211,.42)!important;
  border-radius:8px!important;
  background:rgba(237,228,211,.055)!important;
}
#precios .plate-price .claim{
  margin:0 0 1.15rem!important;
  max-width:24ch!important;
  font-family:var(--sign-font)!important;
  font-size:clamp(1.6rem,2.3vw,2.05rem)!important;
  font-weight:600!important;
  line-height:1.18!important;
  letter-spacing:-.02em!important;
  text-wrap:balance!important;
}
#precios .plate-price .claim b{font:inherit!important;white-space:normal!important}
#precios .plate-price .claim .claim-line{display:block!important}
#precios .plate-price .note{
  margin:0!important;
  max-width:38ch!important;
  font-size:1rem!important;
  line-height:1.55!important;
}

/* Footer CTA heading is a supporting prompt, not another section H2 */
footer .foot-cta h3{
  font-family:var(--sign-font)!important;
  font-size:1.15rem!important;
  line-height:1.2!important;
  font-weight:600!important;
  letter-spacing:.02em!important;
}

@media(max-width:899px){
  #nosotros .about-stats > div{
    grid-template-rows:minmax(2.45rem,auto) auto!important;
    padding:.9rem 0!important;
  }
  #nosotros .about-stats strong{min-height:2.45rem!important}
  #nosotros .about-stats strong .plus{font-size:.82em!important}

  #precios .plate-price.sign{
    min-height:0!important;
    padding:1.5rem!important;
  }
  #precios .plate-price .claim{
    max-width:none!important;
    font-size:1.6rem!important;
    line-height:1.2!important;
    margin-bottom:.85rem!important;
  }
  #precios .plate-price .claim .claim-line{display:inline!important}
  #precios .plate-price .note{font-size:1rem!important}

  footer .foot-cta h3{
    font-size:1.1rem!important;
    line-height:1.2!important;
    letter-spacing:.01em!important;
  }
}

/* =========================================================
   VISUAL TUNING — 2026-10-03 · pass 4
   Process spacing, metrics, projects and service icons
   ========================================================= */

/* Metrics: a touch smaller on desktop, preserving the shared baseline */
@media (min-width:900px){
  #nosotros .about-stats strong{
    font-size:clamp(2.2rem,3.3vw,3rem)!important;
  }
}

/* Process: number sits close to its title; copy keeps its own aligned column */
@media (min-width:900px){
  #proceso .step{
    grid-template-columns:2.15rem minmax(11.5rem,2.6fr) minmax(0,7fr)!important;
    column-gap:.45rem!important;
  }
}

/* Projects & designs: supporting heading, clearly below H2 */
@media (max-width:899px){
  #renders .tech-intro h3{
    font-size:1.6rem!important;
  }
}

/* Services icons: stronger stroke on desktop; 27px on mobile */
#servicios .svc-t .ic{
  stroke-width:3!important;
}
@media (max-width:899px){
  #servicios .svc-t .ic{
    flex:0 0 27px!important;
    width:27px!important;
    height:27px!important;
    stroke-width:3!important;
  }
  #servicios .svc-t{gap:.7rem!important}

  /* Same number/title relationship as desktop, adapted to the narrow layout */
  #proceso .step{
    grid-template-columns:1.9rem minmax(0,1fr)!important;
    column-gap:.4rem!important;
  }
}

/* =========================================================
   PRECIOS — desktop final tuning · 2026-10-03
   ========================================================= */
@media (min-width:900px){
  /* Let each intentional claim line use the full card width. */
  #precios .plate-price .claim{
    max-width:none!important;
    text-wrap:wrap!important;
  }
  #precios .plate-price .claim .claim-line{
    display:block!important;
    white-space:nowrap!important;
  }

  /* First paragraph explains pricing; the following three read as one block. */
  #precios .price-text p{
    margin:0!important;
  }

  #precios .price-text p:nth-child(n+2){
    line-height:1.45!important;
  }
}

/* =========================================================
   PRECIOS — clean final correction · 2026-10-03
   Only: price-copy paragraph rhythm + desktop work-rate claim
   ========================================================= */

/* The payment conditions read as one continuous block on every viewport. */
#precios .price-text p{
  margin:0!important;
  line-height:1.45!important;
}

/* Desktop: no forced line breaks. Let the claim compose naturally inside a
   controlled measure, avoiding both overflow and awkward empty gaps. */
@media (min-width:900px){
  #precios .plate-price .claim{
    font-size:clamp(1.6rem,2vw,2.05rem)!important;
    line-height:1.18!important;
    max-width:29ch!important;
    text-wrap:pretty!important;
  }
  #precios .plate-price .claim .claim-line{
    display:inline!important;
    white-space:normal!important;
  }
}


/* Estado del formulario de contacto: mensajes accesibles y adaptables. */
#contacto #contact-status {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0.75rem 0 0;
  padding: 0.875rem 1rem;
  min-width: 0;
  max-width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--brand-brown);
  background: #f3f0eb;
}
#contacto #contact-status[hidden] { display: none; }
#contacto #contact-status[data-state="success"] {
  color: #28543d;
  background: #edf4ee;
  border-color: #c3d8c8;
}
#contacto #contact-status[data-state="error"] {
  color: #963e3e;
  background: #fbefed;
  border-color: #e7c8c3;
}
#contacto .contact-status-text { min-width: 0; overflow-wrap: anywhere; }
#contacto #contact-status > .contact-status-icon {
  display: none;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  max-width: 20px;
  margin-top: 2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#contacto #contact-status[data-state="success"] > .contact-status-check,
#contacto #contact-status[data-state="error"] > .contact-status-warning { display: block; }
#contacto button[type="submit"]:disabled { cursor: default; opacity: 0.75; }

/* Iconos Casas del Mar: SVG aprobados, sin cambios de geometria */
#servicios .svc-t .svc-icon-new {
  display:block;
  flex:0 0 60px;
  width:60px;
  height:auto;
  max-height:57px;
  object-fit:contain;
}
@media (max-width:899px) {
  #servicios .svc-t .svc-icon-new {
    flex:0 0 40px;
    width:40px;
    max-height:38px;
  }
}

/* Calendly: solo contenedores externos; el iframe conserva sus estilos oficiales.
   Popup y cierre comparten celda para anclar el botón al calendario, sin calcular
   su posición a partir de las dimensiones de la pantalla. */
body > .calendly-overlay {
  --cdm-calendly-close-size: 44px;
  --cdm-calendly-close-gap: 8px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1000px);
  grid-template-rows: minmax(0, 700px);
  justify-content: center;
  align-content: center;
  padding: calc(var(--cdm-calendly-close-size) + var(--cdm-calendly-close-gap) + 16px + env(safe-area-inset-top, 0px))
    max(24px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(24px, env(safe-area-inset-left, 0px));
  background-color: rgba(31,31,31,.8);
}
body > .calendly-overlay .calendly-popup {
  grid-area: 1 / 1;
  position: relative;
  inset: auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  transform: none;
}
body > .calendly-overlay .calendly-popup-close {
  grid-area: 1 / 1;
  justify-self: end;
  align-self: start;
  position: relative;
  inset: auto;
  z-index: 1;
  box-sizing: border-box;
  width: var(--cdm-calendly-close-size);
  height: var(--cdm-calendly-close-size);
  transform: translateY(calc(-100% - var(--cdm-calendly-close-gap)));
  border: 0;
  border-radius: 50%;
  background: var(--brand-blue, #245F87);
  box-shadow: 0 3px 12px rgba(0,0,0,.3);
  cursor: pointer;
  touch-action: manipulation;
}
body > .calendly-overlay .calendly-popup-close::before,
body > .calendly-overlay .calendly-popup-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
}
body > .calendly-overlay .calendly-popup-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
body > .calendly-overlay .calendly-popup-close:hover {
  background-color: var(--brand-blue-hover, #1C4E70);
}
body > .calendly-overlay .calendly-popup-close:focus:not(:focus-visible) {
  outline: none;
}
body > .calendly-overlay .calendly-popup-close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
@media (min-width:976px) {
  body > .calendly-overlay {
    grid-template-columns: minmax(0, 1200px);
  }
  body > .calendly-overlay .calendly-popup {
    max-width: 1200px;
  }
}
@media (max-width:975px) {
  body > .calendly-overlay {
    grid-template-rows: minmax(0, 1fr);
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
  }
  body > .calendly-overlay .calendly-popup {
    /* El CSS oficial impone 700px con !important incluso en mobile. */
    max-height: none !important;
  }
  body:has(> .calendly-overlay) #navbar {
    visibility: hidden;
  }
}
@media (max-width:343px) {
  body > .calendly-overlay {
    padding-right: env(safe-area-inset-right, 0px);
    padding-left: env(safe-area-inset-left, 0px);
  }
  body > .calendly-overlay .calendly-popup-close {
    margin-right: 12px;
  }
}