/* Identidad visual: modifica estas variables para ajustar la paleta. */
:root{--ink:#233d4b;--muted:#4e6571;--primary:#365b70;--light:#edf2f5;--paper:#fafbf9;--line:#c8d4db;--accent:#e95c5c;--serif:"Playfair Display",Georgia,serif;--sans:"Montserrat",Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.8}
a{color:inherit;text-underline-offset:5px}
a:focus-visible{outline:3px solid #ad3434;outline-offset:6px}
::selection{background:#d4e2eb;color:#172f3d}
.container{width:min(1180px,calc(100% - 96px));margin-inline:auto}
.skip-link{position:absolute;left:16px;top:-100px;z-index:10;background:white;padding:12px 20px}
.skip-link:focus{top:16px}
.site-header{background:var(--light);border-bottom:1px solid var(--line)}
.header-inner{display:flex;justify-content:space-between;align-items:center;gap:32px;min-height:108px}
.brand{display:inline-flex;flex-direction:column;text-decoration:none;font-size:27px;font-weight:600;letter-spacing:.17em;line-height:1.2}
.brand span{font-size:10px;letter-spacing:.5em;margin-top:8px}
nav{display:flex;gap:32px;flex-wrap:wrap}
nav a{font-size:16px;font-weight:600;text-decoration:none;padding-block:8px}
nav a:hover,.back-top:hover{text-decoration:underline}
.hero{background:var(--light)}
.construction-badge{display:inline-block;margin:0 0 24px;padding:7px 12px;border:1px solid #a34141;background:#fff7f4;color:#873333;font-size:12px;font-weight:700;letter-spacing:.04em}
.contact-links{flex:0 1 340px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.contact-email{font-size:16px;font-weight:600;overflow-wrap:anywhere}
.contact-email span{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-bottom:4px}
.contact-links p{margin:0;color:var(--muted)}
.contact-inner>div:first-child{max-width:620px}
.hero-grid{display:grid;grid-template-columns:1.75fr 1fr;gap:90px;padding-block:86px 76px;align-items:center}
.eyebrow{margin:0 0 24px;font-size:12px;text-transform:uppercase;font-weight:700;letter-spacing:.17em;line-height:1.7}
h1,h2,h3,p{overflow-wrap:break-word}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.2;margin:0}
h1{font-size:clamp(36px,4.2vw,58px);letter-spacing:-.035em}
h1 em{font-weight:400;color:var(--primary)}
.hero-description{max-width:610px;margin:28px 0 32px;color:var(--muted);font-size:15px}
.button{display:inline-flex;align-items:center;gap:30px;background:var(--primary);color:white;text-decoration:none;font-weight:600;font-size:12px;padding:15px 22px;border:1px solid var(--primary)}
.button:hover{background:#254759}
.button span{font-size:20px;line-height:1}
.hero-note{border-left:1px solid #a9bcc7;padding-left:36px}
.hero-note .eyebrow{margin-top:28px;margin-bottom:16px}
.note-quote{font-family:var(--serif);font-size:31px;line-height:1.35;margin:0 0 18px}
.hero-note>p:last-child{font-size:12px;color:var(--muted);max-width:250px}
.line-motif{height:92px;display:flex;gap:12px;align-items:flex-end}
.line-motif span{display:block;width:20px;border:1px solid #8aa5b6;height:45%}
.line-motif span:nth-child(2){height:65%}.line-motif span:nth-child(3){height:82%}.line-motif span:nth-child(4){height:100%;background:#cbdbe5}
.construction{display:flex;align-items:center;gap:16px;border-top:1px solid var(--line);padding-block:23px}
.construction p{display:flex;gap:24px;align-items:baseline;margin:0;font-size:11px;color:var(--muted)}
.construction strong{color:var(--ink);font-weight:600}
.status-dot{flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:#a34141}
.section{padding-block:88px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:110px}
h2{font-size:clamp(32px,3vw,40px);letter-spacing:-.02em}
.section-copy{font-size:14px;color:var(--muted)}
.section-copy p:first-child{margin-top:0}.section-copy p:last-child{margin-bottom:0}
.areas{background:#f0f4f6;border-block:1px solid #e0e7eb}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:48px;margin-bottom:46px}
.section-heading>p{max-width:300px;font-size:13px;color:var(--muted);margin:0}
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.area{border-top:1px solid #a9becb;padding-top:22px}
.area-number{font-size:11px;color:var(--primary);font-weight:600}
h3{font-size:24px;margin-top:25px}
.area p{font-size:13px;color:var(--muted);margin-bottom:0}
.approach-steps{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:11px;font-weight:600;color:var(--ink)}
.contact-section{background:#e3ecf1;padding-block:48px}
.contact-inner{display:flex;justify-content:space-between;gap:50px;align-items:center}
.contact-inner .eyebrow{margin-bottom:12px}.contact-inner h2{font-size:30px}.contact-inner p{font-size:12px}
.contact-placeholder{max-width:270px;border-left:1px solid #adc0cc;padding-left:24px}
.contact-placeholder strong,.contact-placeholder span{display:block}.contact-placeholder span{margin-top:7px;color:var(--muted)}

/* Redes sociales: Facebook y X */
.contact-socials {
  display: block;
}

.contact-socials .social-link {
  display: inline-block;
  margin: 0 8px 12px 0;
  padding: 12px 16px;
  border: 1px solid #365b70;
  border-radius: 4px;
  background-color: #ffffff;
  color: #365b70;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  vertical-align: middle;
}

.contact-socials .social-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  vertical-align: middle;
  fill: #365b70;
}

.contact-socials .social-link:hover {
  background-color: #365b70;
  color: #ffffff;
}

.contact-socials .social-link:hover .social-icon {
  fill: #ffffff;
}

.contact-socials .social-link:focus {
  outline: 3px solid #a34141;
  outline-offset: 4px;
}

.social-new-tab {
  font-size: 10px;
  font-weight: 400;
}
@media(max-width:680px){.contact-links{flex-basis:auto;width:100%}.contact-links .button{max-width:100%;gap:16px}}
.site-footer{background:#1e1e1e;color:#ececec;border-top:3px solid #e95c5c;padding-top:42px}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:36px;padding-bottom:38px}
.footer-top .brand{font-size:23px}.footer-top p{font-size:12px;color:#d1d1d1;margin:0}.back-top{font-size:11px;text-decoration:none}.back-top span{margin-left:12px}
.footer-bottom{display:flex;justify-content:space-between;gap:24px;border-top:1px solid #484848;padding-block:20px;color:#c9c9c9;font-size:10px}.footer-bottom p{margin:0}
@media(min-width:1600px){.hero-grid{padding-block:110px}}
@media(max-width:960px){.container{width:calc(100% - 56px)}.hero-grid{gap:40px;grid-template-columns:1.6fr 1fr}.hero-note{padding-left:24px}.note-quote{font-size:27px}.split{gap:48px}.construction p{display:block}.construction p span{display:block;margin-top:5px}.area-grid{gap:24px}nav{gap:20px}}
@media(max-width:680px){.container{width:calc(100% - 40px)}.header-inner{align-items:flex-start;flex-direction:column;gap:22px;padding-block:24px}.brand{font-size:24px}nav{gap:12px 22px}nav a{font-size:11px}.hero-grid{grid-template-columns:1fr;padding-block:48px;gap:40px}.hero-note{padding-left:22px}.line-motif{display:none}.hero-note .eyebrow{margin-top:0}.note-quote{font-size:27px;max-width:300px}.hero-note>p:last-child{max-width:none}.hero-description{font-size:14px}.construction{align-items:flex-start}.status-dot{margin-top:7px}.section{padding-block:54px}.split,.area-grid{grid-template-columns:1fr;gap:28px}.section-heading{display:block;margin-bottom:32px}.section-heading>p{margin-top:20px;max-width:none}.area{padding-top:16px}.area h3{margin-top:12px}.contact-inner,.footer-top{align-items:flex-start;flex-direction:column;gap:26px}.contact-placeholder{max-width:100%;margin:0}.footer-bottom{flex-direction:column;gap:8px}.eyebrow{font-size:10px;margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Formato común: WhatsApp, Facebook y X */
.contact-links .social-link {
  display: inline-block;
  margin: 0 8px 12px 0;
  padding: 12px 16px;
  border: 1px solid #365b70;
  border-radius: 4px;
  background-color: #ffffff;
  color: #365b70;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  vertical-align: middle;
}

.contact-links .social-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  vertical-align: middle;
  fill: #365b70;
}

.contact-links .social-link:hover {
  background-color: #365b70;
  color: #ffffff;
}

.contact-links .social-link:hover .social-icon {
  fill: #ffffff;
}

.contact-links .social-link:focus {
  outline: 3px solid #a34141;
  outline-offset: 4px;
}