/* COTA PRL — V10
   Logo integrated + strict horizontal alignment in cover and service grid.
   HTML + CSS only.
*/

:root{
  --ink:#15506F;
  --ink-deep:#0E3D54;
  --paper:#F2EEE4;
  --paper-light:#FAF7EF;
  --orange:#F26B3A;
  --signal:#E8FF36;
  --concrete:#B9BCB8;
  --line:rgba(21,80,111,.22);
  --muted:rgba(14,61,84,.72);
  --shell:min(1220px,calc(100vw - 52px));
  --sans:"Archivo",Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}

body{
  margin:0;background:var(--paper);color:var(--ink-deep);
  font-family:var(--sans);font-size:16px;line-height:1.42;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility
}

a{color:inherit;text-decoration:none}
img{display:block;width:100%}
button,input,textarea{font:inherit}
::selection{background:var(--signal);color:var(--ink-deep)}
.shell{width:var(--shell);margin-inline:auto}
h1,h2,h3,h4,p{text-wrap:pretty}

.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important
}

.eyebrow{
  margin:0;color:var(--ink);font-size:11px;font-weight:650;
  letter-spacing:.11em;text-transform:uppercase
}

/* HEADER */

.site-header{
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:2px solid var(--orange)
}

.slash-home{
  display:inline-block;
  color:var(--orange);
  font-family:var(--sans);
  font-size:34px;
  font-weight:800;
  line-height:1;
  transform:skewX(-10deg);
  transition:transform .18s ease, opacity .18s ease
}

.slash-home:hover,.slash-home:focus-visible{
  transform:skewX(-10deg) translateX(2px);
  opacity:.78
}

.main-nav{
  display:flex;gap:26px;align-items:center;
  font-size:13px;font-weight:600
}

.main-nav a,.service-secondary h4 span,.back-link,.footer-email{position:relative;z-index:0}

.main-nav a::after,.service-secondary h4 span::after,.back-link::after,.footer-email::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:.52em;
  background:var(--signal);z-index:-1;transition:right .2s ease
}

.main-nav a:hover::after,.main-nav a:focus-visible::after,
.back-link:hover::after,.back-link:focus-visible::after,
.footer-email:hover::after,.footer-email:focus-visible::after{right:0}

.service-secondary h4 span::after{
  right:0;height:.24em;bottom:.04em;transform:rotate(-.45deg)
}

/* PHOTO */

.photo-frame{position:relative;margin:0;overflow:hidden;background:var(--concrete)}
.photo-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.02)}

.grain{
  position:absolute;inset:0;pointer-events:none;opacity:.09;
  mix-blend-mode:soft-light;background:url("assets/grain.png") repeat
}

.photo-frame figcaption{
  position:absolute;right:12px;bottom:9px;z-index:2;color:var(--paper-light);
  font-size:9px;font-weight:650;letter-spacing:.08em;font-variant-numeric:tabular-nums
}

/* COVER */

.cover{border-bottom:1px solid var(--line)}

.cover-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(410px,.94fr);
  gap:clamp(44px,5vw,72px);
  align-items:stretch;
  padding:34px 0 36px
}

.cover-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:100%
}

.cover-logo{
  width:clamp(128px,12.5vw,172px);
  height:auto;
  object-fit:contain;
  object-position:left top
}

.cover-text-block{
  max-width:720px;
  padding-top:26px
}

.descriptor{
  max-width:620px;margin:0;color:var(--ink);
  font-size:clamp(22px,2vw,28px);
  font-weight:520;line-height:1.08;letter-spacing:-.022em
}

.claim{
  max-width:690px;margin:20px 0 0;color:var(--ink-deep);font-family:var(--serif);
  font-size:clamp(31px,3vw,42px);line-height:1.02;letter-spacing:-.01em
}

.claim em{font-weight:400}

.cover-lead{
  max-width:650px;margin:20px 0 0;
  font-size:clamp(17px,1.35vw,19px);line-height:1.4
}

/* Text column and image share one vertical envelope on desktop. */
.cover-visual{
  width:100%;
  height:100%;
  min-height:440px;
  align-self:stretch
}

.cover-visual img{object-position:58% 53%}

/* SERVICES */

.services{padding:52px 0 60px}
.section-label{margin-bottom:24px}

.services-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(38px,4vw,58px);
  align-items:stretch
}

.service-card{
  position:relative;
  min-width:0;
  padding:22px 0 0;
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:18px
}

.draw-line{
  position:absolute;left:0;right:0;top:0;height:2px;background:var(--orange)
}

@supports (animation-timeline:view()){
  .draw-line{
    transform:scaleX(0);transform-origin:left center;
    animation:line-progress linear both;animation-timeline:view();
    animation-range:entry 0% cover 25%
  }
  @keyframes line-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

.service-number{
  padding-top:5px;color:var(--ink);font-size:15px;font-weight:650;
  font-variant-numeric:tabular-nums
}

/* Four strict horizontal bands:
   title / main copy / secondary copy / image */
.service-body{
  min-width:0;
  display:grid;
  grid-template-rows:
    minmax(100px,auto)
    minmax(128px,auto)
    minmax(152px,auto)
    auto;
  align-content:start
}

.service-body h3{
  margin:0;color:var(--ink);
  font-size:clamp(31px,3vw,43px);
  font-weight:500;line-height:1;letter-spacing:-.026em;
  align-self:start
}

.service-description{
  margin:14px 0 0;color:var(--ink-deep);font-family:var(--serif);
  font-size:clamp(21px,1.72vw,25px);
  line-height:1.14;letter-spacing:-.005em;align-self:start
}

.service-secondary{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--concrete);
  align-self:start
}

.secondary-label{display:flex;gap:8px;align-items:baseline}

.nested-mark{
  color:var(--ink);font-size:14px;font-weight:650;
  font-variant-numeric:tabular-nums
}

.service-secondary h4{
  margin:0;color:var(--ink);font-size:20px;font-weight:600;letter-spacing:-.018em
}

.service-secondary p{
  margin:7px 0 0;color:var(--ink-deep);
  font-family:var(--serif);font-size:19px;line-height:1.18
}

.ghost-label{visibility:hidden}

.service-image{
  width:100%;
  aspect-ratio:16/9;
  margin:0;
  align-self:end
}

#gestion .service-image img{object-position:49% 52%}
#obra .service-image img{object-position:52% 49%}

/* CONTACT */

.contact{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:clamp(44px,6vw,86px);
  padding:56px 0 66px;
  border-top:2px solid var(--orange)
}

.contact-copy h2{
  margin:13px 0 0;color:var(--ink);
  font-size:clamp(37px,4.1vw,55px);
  font-weight:500;line-height:.99;letter-spacing:-.026em
}

.contact-copy h2 em{font-family:var(--serif);font-weight:400;font-size:1.05em}

.contact-copy>p:last-child{
  max-width:570px;margin:18px 0 0;font-family:var(--serif);
  font-size:clamp(21px,1.85vw,25px);line-height:1.16
}

.contact-form{display:grid;gap:16px;align-content:start}
.contact-form label{display:grid;gap:6px}
.contact-form label>span{font-size:12px;font-weight:650}
.contact-form label>span small{color:var(--muted);font-size:10px;font-weight:500}

.contact-form input,.contact-form textarea{
  width:100%;border:0;border-bottom:1px solid var(--ink);border-radius:0;
  padding:8px 0 7px;background:transparent;color:var(--ink-deep);outline:0
}

.contact-form textarea{min-height:76px;resize:vertical}

.contact-form input:focus,.contact-form textarea:focus{
  box-shadow:inset 0 -7px 0 rgba(232,255,54,.66)
}

.contact-form button{
  justify-self:start;margin-top:6px;border:1px solid var(--ink);
  padding:12px 17px 11px;background:var(--ink);color:var(--paper-light);
  font-size:13px;font-weight:650;cursor:pointer;
  transition:background .18s ease,color .18s ease
}

.contact-form button:hover,.contact-form button:focus-visible{
  background:var(--signal);color:var(--ink-deep)
}

.honeypot{
  position:absolute!important;width:1px!important;height:1px!important;
  overflow:hidden!important;clip:rect(1px,1px,1px,1px)!important;white-space:nowrap!important
}

/* FOOTER */

.site-footer{
  min-height:88px;
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  gap:24px;
  align-items:center;
  border-top:1px solid var(--line);
  font-size:12px
}

.footer-slash{font-size:28px}
.site-footer p{margin:0}
.footer-email{font-size:12px;color:var(--ink)}
.copyright{color:var(--muted)}

/* THANKS */

.thanks{
  min-height:calc(100vh - 68px);
  display:flex;flex-direction:column;justify-content:center;padding:72px 0
}

.thanks h1{
  max-width:800px;margin:18px 0 0;color:var(--ink);
  font-size:clamp(54px,7vw,96px);font-weight:500;line-height:.94;letter-spacing:-.03em
}

.thanks h1 em{font-family:var(--serif);font-weight:400}

.thanks>p:not(.eyebrow){
  max-width:600px;margin:25px 0 0;font-family:var(--serif);
  font-size:25px;line-height:1.16
}

.back-link{
  display:inline-block;align-self:flex-start;margin-top:28px;font-size:13px;font-weight:650
}

/* RESPONSIVE */

@media (max-width:900px){
  :root{--shell:min(100% - 32px,1220px)}

  .cover-inner{
    grid-template-columns:1fr;
    gap:28px;
    padding:32px 0 40px
  }

  .cover-copy{
    display:block
  }

  .cover-logo{
    width:132px
  }

  .cover-text-block{
    padding-top:22px
  }

  .cover-visual{
    width:100%;
    max-width:680px;
    min-height:0;
    height:auto;
    aspect-ratio:16/9;
    justify-self:start
  }

  .services-grid{
    grid-template-columns:1fr;
    gap:40px
  }

  .service-card{
    grid-template-columns:52px minmax(0,1fr)
  }

  .service-body{
    grid-template-rows:auto auto auto auto
  }

  .contact{
    grid-template-columns:1fr;
    gap:36px
  }

  .contact-form{max-width:650px}

  .site-footer{
    grid-template-columns:1fr;
    gap:8px;
    align-content:center;
    padding:22px 0
  }
}

@media (max-width:560px){
  html{scroll-padding-top:68px}

  .main-nav{gap:12px;font-size:11px}
  .slash-home{font-size:30px}

  .cover-logo{width:112px}
  .descriptor{font-size:22px}
  .claim{font-size:34px}
  .cover-lead{font-size:18px}

  .services{padding:48px 0 56px}
  .section-label{margin-bottom:24px}

  .service-card{
    grid-template-columns:1fr;
    gap:10px
  }

  .service-body h3{font-size:35px}
  .service-description{font-size:23px}
  .service-secondary p{font-size:20px}

  .contact{padding:50px 0 60px}
  .contact-copy h2{font-size:40px}
  .contact-copy>p:last-child{font-size:21px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  @supports (animation-timeline:view()){
    .draw-line{transform:scaleX(1);animation:none}
  }
  .main-nav a::after,.back-link::after,.footer-email::after{transition:none}
}