/*
Theme Name: Veraguas Pool
Description: Tema de bloques propio para Veraguas Pool.
Version: 0.1.0
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: veraguas-pool
Domain Path: /languages
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* Fundamentos: valores compartidos con theme.json. */
:root {
  --vp-navy: var(--wp--preset--color--navy, #092f42);
  --vp-water: var(--wp--preset--color--water, #8ce3db);
  --vp-teal: var(--wp--preset--color--teal, #147d78);
  --vp-muted: var(--wp--preset--color--muted, #526a73);
  --vp-line: var(--wp--preset--color--line, #d7e2e2);
  --vp-mist: var(--wp--preset--color--mist, #f1f6f5);
  --vp-white: var(--wp--preset--color--white, #fff);
  --vp-s1: var(--wp--preset--spacing--eight, 8px);
  --vp-s2: var(--wp--preset--spacing--sixteen, 16px);
  --vp-s3: var(--wp--preset--spacing--twenty-four, 24px);
  --vp-s4: var(--wp--preset--spacing--thirty-two, 32px);
  --vp-s5: var(--wp--preset--spacing--forty-eight, 48px);
  --vp-s6: var(--wp--preset--spacing--sixty-four, 64px);
  --vp-section-space: clamp(64px, 6.7vw, 96px);
  --vp-gutter: var(--wp--custom--layout--gutter, clamp(20px, 3.5vw, 48px));
  --vp-radius: var(--wp--custom--radius--card, 8px);
  --vp-button-radius: var(--wp--custom--radius--button, 6px);
  --vp-body: var(--wp--preset--font-size--body, 1rem);
  --vp-small: var(--wp--preset--font-size--auxiliary, .875rem);
  --vp-shadow: 0 12px 28px rgb(9 47 66 / 7%);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--vp-white); color: var(--vp-navy); font-family: Manrope, Arial, sans-serif; font-size: var(--vp-body); line-height: 1.65; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, [tabindex='-1']:focus-visible { outline: 3px solid var(--vp-navy); outline-offset: 4px; box-shadow: 0 0 0 4px white; }
.vp-hero :focus-visible, .vp-coatings :focus-visible, .vp-footer :focus-visible { outline-color: var(--vp-water); box-shadow: 0 0 0 4px var(--vp-navy); }
.vp-home :is(h1,h2,h3,p,figure), .vp-footer h2 { margin: 0; }
.vp-home h1, .vp-home h2, .vp-home h3 { overflow-wrap: break-word; }
.vp-container { width: min(1280px, calc(100% - var(--vp-gutter) * 2)); margin-inline: auto; }
.vp-section { padding-block: var(--vp-section-space); }
.vp-home h2 { font-size: var(--wp--preset--font-size--section-title); font-weight: 500; line-height: 1.16; letter-spacing: -.035em; text-wrap: balance; }
.vp-home h3 { font-size: var(--wp--preset--font-size--card-title); font-weight: 650; line-height: 1.35; letter-spacing: -.02em; }
.vp-home em { color: var(--vp-water); font-style: normal; }
.vp-muted { color: var(--vp-muted); }
.vp-eyebrow { margin-bottom: var(--vp-s3) !important; font-size: .75rem; font-weight: 750; letter-spacing: .14em; line-height: 1.6; }
.vp-section-heading { display: flex; justify-content: space-between; align-items: end; gap: var(--vp-s5); margin-bottom: var(--vp-s5); }
.vp-section-heading > p { max-width: 320px; color: var(--vp-muted); }
.vp-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--vp-s3); }

/* Una familia de acciones; contraste contextual claro/oscuro. */
.vp-button { display: inline-flex; justify-content: center; align-items: center; gap: var(--vp-s3); min-height: 52px; padding: 14px 24px; border: 1px solid transparent; border-radius: var(--vp-button-radius); font-size: var(--vp-small); font-weight: 700; line-height: 1.5; transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease; }
.vp-button span, .vp-text-link span, .vp-link-light span { font-size: 20px; font-weight: 400; }
.vp-button-dark { background: var(--vp-navy); color: var(--vp-white); }
.vp-button-dark:hover { background: #16465b; }
.vp-button-water { background: var(--vp-water); color: var(--vp-navy); }
.vp-button-water:hover { background: #b4eee8; }
.vp-button-outline { color: var(--vp-navy); border-color: var(--vp-navy); }
.vp-button-outline:hover { background: var(--vp-navy); color: white; }
.vp-text-link, .vp-link-light { display: inline-flex; align-items: center; gap: var(--vp-s3); min-height: 48px; padding-block: 10px; border-bottom: 1px solid currentColor; font-size: var(--vp-small); font-weight: 700; }
.vp-text-link:hover { color: var(--vp-teal); }
.vp-link-light { color: white; }
.vp-link-light:hover { color: var(--vp-water); }

/* Cabecera alineada con el contenido. */
.vp-header { position: relative; z-index: 10; display: flex; align-items: center; gap: 24px; width: min(1280px, calc(100% - var(--vp-gutter) * 2)); min-height: 88px; margin-inline: auto; padding-block: 10px; background: white; }
.vp-brand { width: 116px; flex-shrink: 0; }
.vp-brand img { width: 100%; height: auto; }
.vp-nav { display: flex; align-items: center; gap: 22px; margin-inline: auto; }
.vp-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--vp-small); font-weight: 650; }
.vp-nav a:hover { color: var(--vp-teal); }
.vp-language { position: relative; display: flex; align-items: center; flex-shrink: 0; gap: 2px; font-size: var(--vp-small); }
.vp-language a, .vp-language button { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 44px; padding: 4px; border: 0; border-radius: 4px; background: transparent; color: var(--vp-muted); font-size: inherit; font-weight: 650; cursor: pointer; }
.vp-language [aria-current='true'] { color: var(--vp-navy); text-decoration: underline; text-underline-offset: 5px; }
.vp-language a:hover, .vp-language button:hover { color: var(--vp-teal); background: var(--vp-mist); }
.vp-language-note { position: absolute; z-index: 20; top: 100%; right: 0; width: 260px; padding: 16px; margin: 8px 0 0; border: 1px solid var(--vp-line); border-radius: var(--vp-radius); background: white; color: var(--vp-navy); box-shadow: var(--vp-shadow); font-size: var(--vp-small); line-height: 1.6; }
.vp-language-note[hidden] { display: none; }
html:not(.vp-js) .vp-header, html:not(.vp-js) .vp-nav { flex-wrap: wrap; }
html:not(.vp-js) .vp-language { flex-wrap: wrap; max-width: 100%; }
.vp-language noscript { flex-basis: 100%; width: 260px; max-width: 100%; white-space: normal; }
@media (min-width: 1200px) and (max-width: 1399px) { .vp-nav { gap: 14px; } .vp-header { gap: 16px; } .vp-header-actions { gap: 12px; } }
@media (max-width: 1199px) { .vp-language-note { right: auto; left: 0; width: min(260px, calc(100vw - 100px)); } }
.vp-header-actions { display: flex; align-items: center; gap: 20px; }
.vp-whatsapp { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; font-size: var(--vp-small); font-weight: 650; color: var(--vp-teal); }
.vp-header .vp-button { padding-inline: 18px; gap: 16px; }
.vp-menu-toggle, .vp-nav .vp-mobile-quote { display: none; }
.vp-skip { position: fixed; top: 12px; left: 12px; z-index: 100; width: 1px; height: 1px; padding: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; background: white; border-radius: 6px; }
.vp-skip:focus { width: auto; height: auto; padding: 14px 20px; clip-path: none; overflow: visible; }

/* Hero panorámico: altura flexible, texto y acciones en el flujo normal. */
.vp-hero { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; width: 100%; min-width: 0; min-height: 590px; aspect-ratio: 2.2; max-height: 760px; color: white; background: var(--vp-navy); }
.vp-hero-image, .vp-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.vp-hero-image { z-index: -2; object-fit: cover; object-position: center; }
.vp-hero-shade { z-index: -1; background: linear-gradient(90deg, rgb(3 32 48 / 96%) 0%, rgb(3 32 48 / 86%) 34%, rgb(3 32 48 / 35%) 66%, rgb(3 32 48 / 8%) 100%); }
.vp-hero-content { padding-block: 48px 28px; }
.vp-hero .vp-eyebrow { display: flex; align-items: center; gap: 12px; color: #cceeea; }
.vp-hero .vp-eyebrow span { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--vp-water); }
.vp-hero h1 { max-width: 720px; font-size: var(--wp--preset--font-size--hero-title); font-weight: 500; line-height: 1.08; letter-spacing: -.045em; }
.vp-hero h1 em { display: block; }
.vp-hero-copy { max-width: 460px; margin-top: var(--vp-s3) !important; color: #e6f0f1; font-size: 1rem; line-height: 1.7; }
.vp-hero .vp-actions { margin-top: var(--vp-s4); }
.vp-hero-bottom { display: flex; align-items: center; gap: 24px; padding-block: 20px 24px; font-size: .75rem; letter-spacing: .06em; }
.vp-hero-bottom > span:first-child { background: rgb(9 47 66 / 80%); padding: 4px 8px; border-radius: 4px; }
.vp-image-note { margin-left: auto; padding: 5px 10px; background: var(--vp-navy); color: white; border-radius: 4px; font-size: .75rem; letter-spacing: 0; }
.vp-hero-bottom > a { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 1px solid #b8d9dc; border-radius: 50%; background: var(--vp-navy); font-size: 20px; }

/* Empresa: dos columnas con una misma línea de inicio. */
.vp-company { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: var(--vp-s6); padding-block: clamp(48px, 5vw, 72px); }
.vp-experience { display: flex; align-items: baseline; gap: 14px; margin-top: 16px; color: var(--vp-teal); }
.vp-experience > span { font-size: 1.25rem; letter-spacing: 0; }
.vp-experience strong { font-size: clamp(52px, 5vw, 72px); font-weight: 500; line-height: 1; letter-spacing: -.045em; }
.vp-company-copy { padding-top: 40px; }
.vp-company-copy > p:first-child { font-size: var(--wp--preset--font-size--lead); line-height: 1.65; }
.vp-company-copy > p + p { margin-top: var(--vp-s3); color: var(--vp-muted); }
.vp-company-copy .vp-text-link { margin-top: var(--vp-s3); }

/* Servicios: apertura fotográfica 4:3 y ocho tarjetas del mismo sistema. */
.vp-services { background: var(--vp-mist); padding-top: clamp(48px, 4.5vw, 64px); }
.vp-home h2 .vp-muted { color: var(--vp-teal); }
.vp-services > .vp-container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vp-s5); align-items: center; }
.vp-services .vp-section-heading { flex-direction: column; align-items: start; justify-content: center; gap: var(--vp-s3); margin: 0; }
.vp-services .vp-section-heading > p { max-width: 440px; }
.vp-services-layout { display: contents; }
.vp-service-photo { position: relative; isolation: isolate; grid-column: 2; grid-row: 1; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--vp-radius); }
.vp-service-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.vp-service-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 18%, rgb(3 32 48 / 94%) 100%); }
.vp-service-photo figcaption { position: absolute; z-index: 1; bottom: 24px; left: 24px; right: 24px; display: grid; gap: 12px; color: white; }
.vp-service-photo figcaption > span { font-size: .75rem; letter-spacing: .12em; }
.vp-service-photo strong { font-size: clamp(24px, 2.2vw, 32px); font-weight: 500; line-height: 1.2; letter-spacing: -.025em; }
.vp-service-photo small { font-size: .8125rem; line-height: 1.5; }
.vp-service-list { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--vp-s3); }
.vp-service-list article { display: flex; align-items: start; gap: var(--vp-s3); padding: var(--vp-s4); border: 1px solid var(--vp-line); border-radius: var(--vp-radius); background: white; }
.vp-service-mark { display: grid; justify-items: center; gap: 10px; width: 44px; flex-shrink: 0; color: var(--vp-teal); }
.vp-service-icon { display: block; width: 36px; height: 36px; }
.vp-number { color: var(--vp-muted); font-size: .75rem; font-weight: 650; letter-spacing: .08em; line-height: 1; }
.vp-service-list h3 { font-size: 1.25rem; }
.vp-service-list p { margin-top: 12px; color: var(--vp-muted); font-size: 1rem; }
.vp-services-action { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.vp-services-action p { color: var(--vp-muted); }

/* Revestimientos: misma tipografía y ritmo; muestras aún ilustrativas. */
.vp-coatings { background: var(--vp-navy); color: white; }
.vp-coatings-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--vp-s6); }
.vp-coatings .vp-eyebrow { color: #c4dce0; }
.vp-coatings-grid > div > p:not(.vp-eyebrow) { max-width: 450px; margin-top: var(--vp-s3); color: #d0e1e4; }
.vp-coatings .vp-button { margin-top: var(--vp-s4); }
.vp-finishes { display: grid; gap: 16px; }
.vp-finishes article { display: flex; align-items: center; gap: 24px; padding: 24px; border: 1px solid #53717e; border-radius: var(--vp-radius); }
.vp-finishes h3 { font-size: 1.25rem; }
.vp-finishes p { margin-top: 8px; color: #d0e1e4; font-size: 1rem; }
.vp-finishes small { color: var(--vp-water); font-size: .75rem; letter-spacing: .08em; }
.vp-swatch { display: block; width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; border: 1px solid #b0cbd0; overflow: hidden; }
.vp-swatch img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.vp-swatch-water { background: radial-gradient(ellipse at 20% 20%, #c3ede1, transparent 65%), #3e9eaf; }
.vp-swatch-liner { background-color: #4994b4; background-image: linear-gradient(#ffffff55 1px, transparent 1px), linear-gradient(90deg, #ffffff55 1px, transparent 1px); background-size: 9px 9px; }
.vp-swatch-epoxy { background: linear-gradient(135deg, #b5dfea, #5298b3); }
.vp-swatch-floor { background: linear-gradient(135deg, #d6d6cc, #9d9f96); }
.vp-finishes .vp-finish-note { margin: 0; color: #d0e1e4; font-size: var(--vp-small); }

/* Proyectos: igualdad de columnas, proporciones y leyendas. */
.vp-projects .vp-section-heading { margin-bottom: var(--vp-s3); }
.vp-reference { max-width: 760px; margin-bottom: var(--vp-s4) !important; color: var(--vp-muted); font-size: var(--vp-small); }
.vp-project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: var(--vp-s4); }
.vp-project-grid figure { min-width: 0; border: 1px solid var(--vp-line); border-radius: var(--vp-radius); overflow: hidden; background: white; }
.vp-project-media { aspect-ratio: 4 / 3; overflow: hidden; }
.vp-project-grid img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
.vp-project-link { width: fit-content; margin-top: 4px; }
.vp-project-link > span:first-child { font-size: inherit; font-weight: inherit; }
.vp-project-preview { width: min(760px, calc(100% - 32px)); max-height: calc(100svh - 32px); padding: 24px; border: 0; border-radius: var(--vp-radius); color: var(--vp-navy); background: white; }
.vp-project-preview::backdrop { background: rgb(9 47 66 / 85%); }
.vp-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.vp-preview-heading h2 { margin: 0; font-size: clamp(20px, 3vw, 26px); line-height: 1.3; }
.vp-preview-close { min-height: 44px; flex-shrink: 0; padding: 8px 12px; border: 1px solid var(--vp-line); border-radius: var(--vp-button-radius); color: var(--vp-navy); background: var(--vp-mist); cursor: pointer; }
.vp-preview-close:hover { background: var(--vp-water); }
.vp-preview-media img { width: 100%; max-height: 65svh; object-fit: contain; }
.vp-project-preview > p { margin: 16px 0 0; font-size: var(--vp-small); color: var(--vp-muted); }
body.vp-preview-open { overflow: hidden; }
.vp-project-grid figcaption { display: grid; gap: 10px; padding: var(--vp-s3); }
.vp-project-grid small { color: var(--vp-muted); font-size: .75rem; letter-spacing: .08em; }
.vp-project-grid h3 { font-size: 1.375rem; }
/* Contrato visual para futuras galerías; no incorpora componentes nuevos. */
.vp-gallery-image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Proceso: numeración visible y una secuencia continua. */
.vp-process { background: var(--vp-mist); }
.vp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vp-s4); margin: 0; padding: 0; list-style: none; }
.vp-steps li { position: relative; border-top: 1px solid #9db6bd; padding-top: var(--vp-s3); }
.vp-steps span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--vp-navy); color: var(--vp-water); font-size: 1rem; font-weight: 600; }
.vp-steps h3 { margin-top: var(--vp-s3); font-size: 1.25rem; }
.vp-steps p { margin-top: 12px; color: var(--vp-muted); font-size: 1rem; }

/* Cierre comercial y datos reales. */
.vp-contact { position: relative; isolation: isolate; overflow: hidden; background: var(--vp-water); }
.vp-contact::after { content: ''; position: absolute; z-index: -1; width: 650px; height: 650px; top: -80px; right: -160px; border: 1px solid #508f8d40; border-radius: 50%; box-shadow: 0 0 0 64px #508f8d0d, 0 0 0 128px #508f8d0d; pointer-events: none; }
.vp-contact h2 { font-size: clamp(38px, 4.5vw, 64px); }
.vp-contact em { color: var(--vp-navy); }
.vp-contact p:not(.vp-eyebrow) { margin-top: var(--vp-s3); }
.vp-contact .vp-actions { margin-top: var(--vp-s4); gap: var(--vp-s2); }
.vp-footer { padding-top: var(--vp-s6); background: var(--vp-navy); color: #d0e1e4; font-size: var(--vp-small); }
.vp-footer-grid { display: grid; grid-template-columns: 1.15fr 1.15fr 1fr .65fr; gap: var(--vp-s4); padding-bottom: var(--vp-s6); }
.vp-footer h2 { margin-bottom: var(--vp-s3); color: white; font-size: .875rem; font-weight: 700; }
.vp-footer a { display: flex; align-items: center; width: fit-content; min-height: 44px; }
.vp-footer a:hover { color: white; text-decoration: underline; text-underline-offset: 5px; }
.vp-footer-brand img { width: 172px; padding: 12px; background: white; border-radius: var(--vp-radius); }
.vp-footer-brand p { margin-top: var(--vp-s3); }
.vp-footer .vp-phone { color: white; font-size: 1.75rem; font-weight: 600; }
.vp-footer dl { margin: 0; }
.vp-footer dd { margin: 0 0 16px; color: white; }
.vp-footer dt { color: #d0e1e4; }
.vp-footer-bottom { display: flex; justify-content: space-between; gap: var(--vp-s3); padding-block: var(--vp-s3); border-top: 1px solid #53717e; font-size: .8125rem; }

/* Adaptación por contenido, sin alterar el zoom. */
@media (min-width: 1600px) {
  .vp-container, .vp-header { width: min(1440px, calc(100% - var(--vp-gutter) * 2)); }
  .vp-hero { aspect-ratio: 2.5; min-height: 720px; }
  .vp-hero-content { padding-top: 64px; }
}
@media (max-width: 1199px) {
  .vp-header { flex-wrap: wrap; gap: 20px; }
  .vp-brand { margin-right: auto; }
  .vp-menu-toggle { display: inline-flex; gap: 12px; align-items: center; justify-content: center; min-height: 48px; padding: 10px 16px; border: 1px solid #607c88; border-radius: var(--vp-button-radius); background: white; color: var(--vp-navy); font-size: var(--vp-small); }
  .vp-nav { width: 100%; order: 4; flex-wrap: wrap; }
  .vp-js .vp-nav { display: none; position: absolute; top: calc(100% - 1px); left: 0; right: 0; padding: 24px; border: 1px solid var(--vp-line); border-radius: var(--vp-radius); background: white; box-shadow: var(--vp-shadow); }
  .vp-js .vp-menu-toggle[aria-expanded='true'] + .vp-nav { display: flex; }
  .vp-nav .vp-mobile-quote { display: inline-flex; color: white; }
  .vp-coatings-grid { gap: 40px; }
  .vp-finishes article { gap: 20px; padding: 20px; }
  .vp-swatch { width: 52px; height: 52px; }
  .vp-service-list article { padding: 24px; gap: 20px; }
  .vp-footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px; }
  .vp-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 800px) {
  :root { --vp-gutter: 32px; --vp-section-space: 64px; }
  .vp-header-actions .vp-button { display: none; }
  .vp-header-actions { order: 2; }
  .vp-menu-toggle { order: 3; }
  .vp-js .vp-nav { flex-direction: column; align-items: stretch; gap: 8px; }
  .vp-nav a { padding-inline: 12px; }
  .vp-hero { aspect-ratio: auto; min-height: 610px; max-height: none; }
  .vp-hero h1 { font-size: clamp(42px, 7vw, 60px); }
  .vp-hero-content { padding-block: 48px 24px; }
  .vp-hero-shade { background: linear-gradient(90deg, rgb(3 32 48 / 96%), rgb(3 32 48 / 86%) 55%, rgb(3 32 48 / 45%)); }
  .vp-hero-bottom { flex-wrap: wrap; gap: 12px; }
  .vp-hero-bottom > a { margin-left: auto; }
  .vp-image-note { order: 3; flex-basis: 100%; margin: 0; width: fit-content; background: transparent; padding-left: 8px; }
  .vp-company { grid-template-columns: 1fr; gap: 32px; }
  .vp-company-copy { padding-top: 0; }
  .vp-section-heading { flex-direction: column; align-items: start; gap: 24px; margin-bottom: 32px; }
  .vp-section-heading > p { max-width: 540px; }
  .vp-services > .vp-container { gap: 32px; }
  .vp-services .vp-section-heading { grid-column: 1 / -1; }
  .vp-service-photo { grid-column: 1 / -1; grid-row: auto; width: min(100%, 560px); justify-self: center; }
  .vp-service-list article { display: block; padding: 24px; }
  .vp-service-mark { margin-bottom: 20px; }
  .vp-service-list h3 { font-size: 1.125rem; }
  .vp-coatings-grid { grid-template-columns: 1fr; gap: 40px; }
  .vp-project-grid { gap: 24px; }
  .vp-project-grid figcaption { padding: 20px; }
  .vp-project-grid h3 { font-size: 1.125rem; }
}
@media (max-width: 599px) {
  :root { --vp-gutter: 20px; --vp-section-space: 56px; }
  .vp-header { min-height: 84px; gap: 12px; }
  .vp-brand { width: 104px; }
  .vp-menu-toggle { padding: 10px 12px; font-size: .875rem; gap: 8px; }
  .vp-whatsapp { font-size: .875rem; }
  .vp-header-actions { gap: 0; }
  .vp-hero { min-height: 0; }
  .vp-hero h1 { font-size: clamp(40px, 11.3vw, 48px); letter-spacing: -.04em; }
  .vp-hero-content { padding-block: 48px 24px; }
  .vp-hero .vp-eyebrow { font-size: .75rem; letter-spacing: .07em; gap: 8px; }
  .vp-hero-copy { margin-top: 24px !important; }
  .vp-hero-image { object-position: 62% center; }
  .vp-hero-shade { background: linear-gradient(90deg, rgb(3 32 48 / 96%), rgb(3 32 48 / 90%) 55%, rgb(3 32 48 / 78%)); }
  .vp-hero .vp-actions { align-items: stretch; flex-direction: column; gap: 12px; margin-top: 24px; }
  .vp-hero .vp-link-light { justify-content: center; min-height: 52px; border: 1px solid #b8d9dc; border-radius: var(--vp-button-radius); }
  .vp-hero-bottom { font-size: .75rem; letter-spacing: 0; padding-bottom: 24px; }
  .vp-home h2 { font-size: clamp(30px, 8.3vw, 36px); }
  .vp-eyebrow { font-size: .75rem; letter-spacing: .08em; margin-bottom: 20px !important; }
  .vp-service-photo figcaption { bottom: 20px; left: 20px; right: 20px; gap: 8px; }
  .vp-service-photo::after { background: linear-gradient(transparent, rgb(3 32 48 / 78%) 35%, rgb(3 32 48 / 96%)); }
  .vp-service-photo figcaption > span { font-size: .6875rem; }
  .vp-service-photo strong { font-size: 26px; }
  .vp-service-photo small { font-size: .75rem; }
  .vp-service-list { grid-template-columns: 1fr; gap: 16px; }
  .vp-service-list article { display: flex; gap: 16px; padding: 24px 20px; }
  .vp-service-mark { width: 36px; margin: 0; }
  .vp-services-action { flex-direction: column; align-items: start; gap: 20px; }
  .vp-finishes article { gap: 16px; padding: 20px; align-items: start; }
  .vp-finishes h3 { font-size: 1.125rem; }
  .vp-swatch { width: 44px; height: 44px; }
  .vp-project-grid { grid-template-columns: 1fr; }
  .vp-project-grid h3 { font-size: 1.25rem; }
  .vp-steps { grid-template-columns: 1fr; gap: 24px; }
  .vp-steps li { display: grid; grid-template-columns: 48px 1fr; gap: 8px 20px; padding-top: 24px; }
  .vp-steps span { grid-row: 1 / 3; }
  .vp-steps h3 { margin: 0; font-size: 1.125rem; }
  .vp-steps p { margin: 0; }
  .vp-contact h2 { font-size: 40px; }
  .vp-contact .vp-actions { align-items: stretch; flex-direction: column; }
  .vp-contact::after { right: -450px; }
  .vp-footer { padding-top: 48px; }
  .vp-footer-grid { gap: 32px 24px; padding-bottom: 40px; }
  .vp-footer-brand, .vp-footer-grid > div:nth-child(2) { grid-column: 1 / -1; }
  .vp-footer h2 { margin-bottom: 16px; }
  .vp-footer-bottom { flex-direction: column; gap: 8px; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .vp-button:hover { transform: translateY(-2px); }
  .vp-project-media img { transition: transform 280ms ease; }
  .vp-project-grid figure:hover img, .vp-project-grid figure:focus-within img { transform: scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vp-button { transition: none; transform: none; }
}

/* Fase 3F: a permanent, compact language selector outside the mobile menu. */
.vp-header > .vp-language { flex-shrink: 0; gap: 1px; margin: 0; }
.vp-header > .vp-language a { min-width: 30px; padding-inline: 3px; }
@media (max-width: 1199px) { .vp-header > .vp-language { order: 2; } }
@media (max-width: 599px) { .vp-header { gap: 8px; } .vp-header > .vp-language { margin-left: auto; } .vp-header-actions { display: none; } .vp-language a { min-width: 30px; } }
.vq-header .vp-language { flex-shrink: 0; }
.vpl-not-found { padding-block: clamp(64px, 12vw, 140px); }

.vp-nav .vp-mobile-whatsapp { display: none; }
@media (max-width: 599px) { .vp-nav .vp-mobile-whatsapp { display: inline-flex; } }