/*
Theme Name: Ambiente Construido
Theme URI: https://www.ambienteconstruido.com.co
Author: Profesionales del Ambiente Construido
Description: Tema a medida para Profesionales del Ambiente Construido — bufete de arquitectura, urbanismo sostenible y consultoría LEED en el Caribe colombiano. Incluye tipos de contenido para Proyectos y Clientes, plantillas de página para Servicios y Contacto, y un sistema visual inspirado en planos arquitectónicos.
Version: 1.5.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ambiente-construido
*/

/* ---------------------------------------------------
   0. TOKENS
--------------------------------------------------- */
:root{
  --stone:#F1EDE4;
  --stone-dim:#E7E1D3;
  --ink:#182420;
  --manglar:#3F5B52;
  --manglar-deep:#2A403A;
  --arena:#C9A66B;
  --concrete:#CFC7B5;
  --white:#FFFFFF;
  --rule: 1px solid var(--concrete);
  --max: 1160px;
  --logo-height: 48px;
}

/* ---------------------------------------------------
   1. RESET / BASE
--------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--stone);
  color:var(--ink);
  font-family:'Montserrat',sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{
  font-family:'Montserrat',sans-serif;
  color:var(--ink);
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.1;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%; height:auto;}
svg{display:block; max-width:100%;}
ul{list-style:none;}
button{font:inherit; cursor:pointer; background:none; border:none; color:inherit;}
input,textarea{font:inherit;}
:focus-visible{outline:2px solid var(--manglar); outline-offset:3px;}
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--ink); color:var(--stone); padding:12px 18px;
}
.skip-link:focus{left:16px; top:16px; width:auto; height:auto; clip:auto;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
@media (max-width:640px){ .wrap{padding:0 20px;} }

/* ---------------------------------------------------
   2. META STRIP + HEADER
--------------------------------------------------- */
.metastrip{border-bottom:var(--rule); font-size:12.5px; color:var(--manglar-deep);}
.metastrip .wrap{display:flex; justify-content:space-between; align-items:center; height:38px; gap:16px;}
.metastrip span{opacity:0.85;}
@media (max-width:640px){ .metastrip .wrap span:last-child{display:none;} }

header.site{border-bottom:var(--rule); position:sticky; top:0; background:var(--stone); z-index:30;}
nav.wrap{display:flex; align-items:center; justify-content:space-between; height:78px; gap:20px;}
.logo{font-family:'Montserrat',sans-serif; font-weight:800; font-size:18px; line-height:1.15; max-width:240px;}
.logo em{font-style:normal; color:var(--manglar);}
.logo img,.logo .logo-img{max-height:var(--logo-height, 48px); width:auto;}

.navlinks{display:flex; gap:34px; font-size:14.5px; font-weight:600;}
.navlinks a{position:relative; padding:4px 0; display:inline-block;}
.navlinks a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--manglar); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;}
.navlinks a:hover::after,.navlinks li.current-menu-item a::after{transform:scaleX(1);}
.navlinks li.current-menu-item a{color:var(--manglar-deep);}

.navcta{border:1px solid var(--ink); border-radius:2px; padding:9px 16px; font-size:14px; font-weight:600; white-space:nowrap; transition:background .2s ease, color .2s ease;}
.navcta:hover{background:var(--ink); color:var(--stone);}

.navtoggle{display:none; width:36px; height:36px; position:relative;}
.navtoggle span,.navtoggle span::before,.navtoggle span::after{
  content:""; position:absolute; left:8px; right:8px; height:1.5px; background:var(--ink); transition:transform .2s ease, opacity .2s ease;
}
.navtoggle span{top:17px;}
.navtoggle span::before{content:""; top:-7px;}
.navtoggle span::after{content:""; top:7px;}
.navtoggle.is-open span{background:transparent;}
.navtoggle.is-open span::before{transform:translateY(7px) rotate(45deg);}
.navtoggle.is-open span::after{transform:translateY(-7px) rotate(-45deg);}

@media (max-width:860px){
  .navlinks{
    display:flex; flex-direction:column; gap:0; position:fixed; left:0; right:0; top:117px;
    background:var(--stone); border-bottom:var(--rule); padding:8px 0;
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  }
  .navlinks.is-open{opacity:1; pointer-events:auto; transform:translateY(0);}
  .navlinks a{padding:14px 20px; display:block;}
  .navlinks a::after{display:none;}
  .navtoggle{display:block;}
  .navcta{display:none;}
}

/* ---------------------------------------------------
   3. HERO
--------------------------------------------------- */
.hero{
  border-bottom:var(--rule); position:relative;
  background-image:linear-gradient(var(--concrete) 1px, transparent 1px);
  background-size:100% 96px;
}
.hero .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; padding:72px 32px 56px; align-items:end;}
@media (max-width:860px){ .hero .wrap{grid-template-columns:1fr;} }

.hero-eyebrow{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--manglar-deep); margin-bottom:22px;}
.hero-eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--arena);}
.hero h1{font-size:clamp(34px,5.4vw,64px); max-width:12ch;}
.hero h1 .line2{color:var(--manglar);}
.hero p.lede{margin-top:26px; max-width:46ch; font-size:17px; color:#3A423F;}
.hero-actions{margin-top:34px; display:flex; gap:14px; flex-wrap:wrap;}

.btn{padding:13px 22px; font-size:14.5px; font-weight:600; border-radius:2px; display:inline-flex; align-items:center; gap:8px;}
.btn-primary{background:var(--ink); color:var(--stone);}
.btn-primary:hover{background:var(--manglar-deep); color:var(--stone);}
.btn-ghost{border:1px solid var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--stone);}

.hero-figure .cap{display:flex; justify-content:space-between; font-size:11.5px; color:var(--manglar-deep); margin-top:10px; padding-top:8px; border-top:var(--rule);}

/* one-time load animation, not per-scroll */
.hero-eyebrow,.hero h1,.hero p.lede,.hero-actions,.hero-figure{opacity:0; animation:riseIn .8s ease forwards;}
.hero-eyebrow{animation-delay:.1s;}
.hero h1{animation-delay:.2s;}
.hero p.lede{animation-delay:.35s;}
.hero-actions{animation-delay:.5s;}
.hero-figure{animation-delay:.3s;}
@keyframes riseIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}

/* ---------------------------------------------------
   4. SECTION SCAFFOLDING
--------------------------------------------------- */
/* Solo se aplica a las <section> propias del tema (hijas directas de
   <main id="main">), para no afectar las secciones que Elementor u
   otro editor de páginas generen dentro del contenido de una página. */
#main > section{border-bottom:var(--rule);}
.ac-elementor-wrap{border-bottom:var(--rule);}
.section-head{padding:64px 0 36px; display:grid; grid-template-columns:220px 1fr; gap:24px;}
@media (max-width:720px){ .section-head{grid-template-columns:1fr; padding:48px 0 28px;} }
.section-code{font-size:13px; color:var(--manglar); font-weight:600; display:flex; align-items:center; gap:8px;}
.section-code::before{content:""; width:20px; height:1px; background:var(--manglar);}
.section-head h2{font-size:clamp(26px,3.2vw,36px); max-width:16ch;}
.section-head .section-note{color:#4A524E; max-width:44ch; align-self:end; font-size:15px;}

/* ---------------------------------------------------
   5. NOSOTROS / STATS
--------------------------------------------------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); border-top:var(--rule);}
@media (max-width:720px){ .stats{grid-template-columns:repeat(2,1fr);} }
.stat{padding:26px 22px; border-right:var(--rule);}
.stat:last-child{border-right:none;}
.stat b{display:block; font-family:'Montserrat',sans-serif; font-size:30px; font-weight:800;}
.stat span{font-size:13px; color:#4A524E;}
.copy-block{padding:40px 0 64px; display:grid; grid-template-columns:220px 1fr; gap:24px;}
@media (max-width:720px){ .copy-block{grid-template-columns:1fr;} }
.copy-block .prose{max-width:64ch; font-size:16.5px; color:#333B37;}
.copy-block .prose > *+*{margin-top:16px;}
.copy-block .prose a{color:var(--manglar-deep); text-decoration:underline;}

/* ---------------------------------------------------
   6. SERVICIOS
--------------------------------------------------- */
.servicios-grid{display:grid; grid-template-columns:repeat(3,1fr); border-top:var(--rule);}
@media (max-width:860px){ .servicios-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .servicios-grid{grid-template-columns:1fr;} }
.servicio{padding:30px 26px 34px; border-right:var(--rule); border-bottom:var(--rule);}
.servicios-grid .servicio:nth-child(3n){border-right:none;}
@media (max-width:860px){ .servicios-grid .servicio:nth-child(3n){border-right:var(--rule);} .servicios-grid .servicio:nth-child(2n){border-right:none;} }
@media (max-width:560px){ .servicios-grid .servicio{border-right:none !important;} }
.servicio .icon{width:34px; height:34px; margin-bottom:20px; color:var(--manglar);}
.servicio .code{font-size:11.5px; color:var(--arena); font-weight:600; letter-spacing:.02em; margin-bottom:10px;}
.servicio h3{font-size:18px; margin-bottom:8px;}
.servicio p{font-size:14.5px; color:#4A524E;}

/* ---------------------------------------------------
   7. ENFOQUE (dark band)
--------------------------------------------------- */
.enfoque{background:var(--manglar-deep); color:var(--stone); border-bottom:none;}
.enfoque .section-code{color:var(--arena);}
.enfoque .section-code::before{background:var(--arena);}
.enfoque .section-head h2,.enfoque .section-head .section-note{color:var(--stone);}
.enfoque .section-note{color:#C9D3CD;}
.enfoque-list{padding-bottom:64px; display:grid; grid-template-columns:220px 1fr; gap:24px;}
@media (max-width:720px){ .enfoque-list{grid-template-columns:1fr;} }
.enfoque-items{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(241,237,228,.18);}
@media (max-width:640px){ .enfoque-items{grid-template-columns:1fr;} }
.enfoque-item{background:var(--manglar-deep); padding:24px 26px;}
.enfoque-item h4{font-family:'Montserrat',sans-serif; font-weight:700; font-size:16px; margin-bottom:8px;}
.enfoque-item p{font-size:14.5px; color:#C9D3CD;}

/* ---------------------------------------------------
   8. PROYECTOS (archive + single)
--------------------------------------------------- */
.proyectos-grid{display:grid; grid-template-columns:repeat(2,1fr); border-top:var(--rule);}
@media (max-width:720px){ .proyectos-grid{grid-template-columns:1fr;} }
.proyecto-card{border-right:var(--rule); border-bottom:var(--rule); padding:28px 30px 34px; display:flex; flex-direction:column;}
.proyectos-grid .proyecto-card:nth-child(2n){border-right:none;}
@media (max-width:720px){ .proyectos-grid .proyecto-card{border-right:none !important;} }
.proyecto-card .thumb{aspect-ratio:4/3; width:100%; overflow:hidden; background:var(--stone-dim); border:var(--rule); margin-bottom:18px;}
.proyecto-card .thumb img{width:100%; height:100%; object-fit:cover;}
.proyecto-card .thumb.placeholder{display:flex; align-items:center; justify-content:center;}
.proyecto-card .code{font-size:11.5px; color:var(--arena); font-weight:600; margin-bottom:8px;}
.proyecto-card h3{font-size:20px; margin-bottom:8px;}
.proyecto-card-meta{font-size:12.5px; color:var(--manglar-deep); font-weight:600; margin-bottom:10px;}
.proyecto-card p{font-size:14.5px; color:#4A524E; margin-bottom:14px;}
.proyecto-card .leer{font-size:13.5px; font-weight:500; color:var(--manglar-deep); margin-top:auto;}

.single-proyecto-hero{border-bottom:var(--rule); padding:56px 0 40px;}
.single-proyecto-hero .cat{font-size:13px; color:var(--manglar); font-weight:600; margin-bottom:14px;}
.single-proyecto-hero h1{font-size:clamp(30px,4.5vw,48px); max-width:18ch; margin-bottom:20px;}
.single-proyecto-hero .thumb{width:100%; aspect-ratio:16/9; border:var(--rule); overflow:hidden; margin-top:32px; background:var(--stone-dim);}
.single-proyecto-hero .thumb img{width:100%; height:100%; object-fit:cover;}
.single-proyecto-body{padding:48px 0 64px; display:grid; grid-template-columns:220px 1fr; gap:24px;}
@media (max-width:720px){ .single-proyecto-body{grid-template-columns:1fr;} }
.single-proyecto-body .prose{max-width:70ch; font-size:16.5px; color:#333B37;}
.single-proyecto-body .prose > *+*{margin-top:18px;}
.single-proyecto-body .prose img{margin:8px 0;}
.back-link{display:inline-block; margin-bottom:24px; font-size:13.5px; color:var(--manglar-deep);}

/* ficha de datos rápidos (proyecto / cliente) */
.ficha{display:flex; flex-wrap:wrap;}
.ficha-item{flex:1 1 200px; padding:22px 26px; border-right:var(--rule); border-bottom:var(--rule);}
.ficha-item:last-child{border-right:none;}
.ficha-item span{display:block; font-size:11px; color:var(--manglar); font-weight:700; letter-spacing:.04em; margin-bottom:6px;}
.ficha-item b{font-family:'Montserrat',sans-serif; font-weight:600; font-size:15px; color:var(--ink);}

/* galería de imágenes adicional */
.galeria-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--concrete);}
.galeria-item{aspect-ratio:4/3; overflow:hidden; background:var(--stone-dim);}
.galeria-item img{width:100%; height:100%; object-fit:cover; display:block;}
@media (max-width:720px){ .galeria-grid{grid-template-columns:repeat(2,1fr);} }

/* ---------------------------------------------------
   9. CLIENTES
--------------------------------------------------- */
.clientes-grid{display:grid; grid-template-columns:repeat(4,1fr); border-top:var(--rule);}
@media (max-width:720px){ .clientes-grid{grid-template-columns:repeat(2,1fr);} }
.cliente-logo{border-right:var(--rule); border-bottom:var(--rule); padding:34px 24px; display:flex; align-items:center; justify-content:center; min-height:120px;}
.clientes-grid .cliente-logo:nth-child(4n){border-right:none;}
@media (max-width:720px){ .clientes-grid .cliente-logo:nth-child(4n){border-right:var(--rule);} .clientes-grid .cliente-logo:nth-child(2n){border-right:none;} }
.cliente-logo img{max-height:52px; width:auto; filter:grayscale(1); opacity:.8; transition:filter .2s ease, opacity .2s ease;}
.cliente-logo:hover img{filter:grayscale(0); opacity:1;}
.cliente-logo .nombre-solo{font-family:'Montserrat',sans-serif; font-weight:700; font-size:15px; color:#4A524E;}

/* ---------------------------------------------------
   10. CONTACTO / FORM
--------------------------------------------------- */
.contacto-wrap{padding:64px 0 70px; display:grid; grid-template-columns:1.1fr .9fr; gap:48px;}
@media (max-width:800px){ .contacto-wrap{grid-template-columns:1fr;} }
.contacto-wrap h1,.contacto-wrap h2{font-size:clamp(28px,3.6vw,42px); max-width:14ch; margin-bottom:18px;}
.contacto-wrap p.lede{max-width:46ch; color:#3A423F; margin-bottom:30px; font-size:16px;}
.contact-lines{border-top:var(--rule); margin-bottom:36px;}
.contact-line{display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:var(--rule); font-size:15px; gap:16px; flex-wrap:wrap;}
.contact-line span:first-child{color:#4A524E; font-size:13px;}
.contact-line a:hover{color:var(--manglar);}

.pac-form{border:var(--rule); padding:30px;}
.pac-form .field{margin-bottom:18px;}
.pac-form label{display:block; font-size:13px; color:#4A524E; margin-bottom:6px;}
.pac-form input[type=text],
.pac-form input[type=email],
.pac-form textarea{
  width:100%; border:1px solid var(--concrete); background:var(--white);
  padding:11px 13px; font-family:'Montserrat',sans-serif; font-size:14.5px; border-radius:2px;
}
.pac-form input:focus,.pac-form textarea:focus{border-color:var(--manglar);}
.pac-form textarea{min-height:120px; resize:vertical;}
.pac-form .hp{position:absolute; left:-9999px;}
.pac-form button{width:100%;}
.form-msg{padding:12px 14px; margin-bottom:20px; font-size:14px; border:1px solid var(--manglar); background:var(--stone-dim);}
.form-msg.error{border-color:#9A3B2E; color:#7A2E23;}

.compass{border:var(--rule); padding:26px; display:flex; flex-direction:column; justify-content:space-between; min-height:260px;}
.compass .rose{width:56px; height:56px; margin-bottom:18px;}
.compass p{font-size:14px; max-width:26ch;}
.compass .scale{font-size:12px; color:#4A524E; margin-top:20px;}
.compass .scalebar{display:flex; align-items:center; gap:6px; margin-top:8px;}
.compass .scalebar div{width:16px; height:6px; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);}
.compass .scalebar div:nth-child(odd){background:var(--ink);}

/* ---------------------------------------------------
   11. BLOG (home.php / single.php / archive.php)
--------------------------------------------------- */
.blog-grid{display:grid; grid-template-columns:repeat(2,1fr); border-top:var(--rule);}
@media (max-width:720px){ .blog-grid{grid-template-columns:1fr;} }
.blog-card{border-right:var(--rule); border-bottom:var(--rule); padding:28px 30px 32px;}
.blog-grid .blog-card:nth-child(2n){border-right:none;}
@media (max-width:720px){ .blog-grid .blog-card{border-right:none !important;} }
.blog-card .thumb{aspect-ratio:16/10; width:100%; overflow:hidden; background:var(--stone-dim); border:var(--rule); margin-bottom:16px;}
.blog-card .thumb img{width:100%; height:100%; object-fit:cover;}
.blog-card .meta{font-size:12px; color:var(--manglar); font-weight:600; margin-bottom:8px;}
.blog-card h2{font-size:19px; margin-bottom:8px;}
.blog-card h2 a:hover{color:var(--manglar-deep);}
.blog-card p{font-size:14.5px; color:#4A524E;}

.single-post-hero{border-bottom:var(--rule); padding:56px 0 40px;}
.single-post-hero .meta{font-size:13px; color:var(--manglar); font-weight:600; margin-bottom:14px;}
.single-post-hero h1{font-size:clamp(30px,4.5vw,46px); max-width:20ch;}
.single-post-body{padding:48px 0 64px; display:grid; grid-template-columns:220px 1fr; gap:24px;}
@media (max-width:720px){ .single-post-body{grid-template-columns:1fr;} }
.single-post-body .prose{max-width:70ch; font-size:16.5px; color:#333B37;}
.single-post-body .prose > *+*{margin-top:18px;}
.single-post-body .prose img{width:100%; height:auto; margin:8px 0;}
.single-post-body .prose h2,.single-post-body .prose h3{margin-top:28px; margin-bottom:4px;}
.single-post-body .prose blockquote{border-left:2px solid var(--manglar); padding-left:18px; color:var(--manglar-deep); font-style:italic;}
.single-post-body .prose ul,.single-post-body .prose ol{padding-left:20px;}

.pagination{display:flex; gap:14px; padding:36px 0; font-size:14px;}
.pagination a,.pagination span{padding:8px 14px; border:var(--rule);}
.pagination .current{background:var(--ink); color:var(--stone); border-color:var(--ink);}

/* ---------------------------------------------------
   12. GENERIC PAGE / 404
--------------------------------------------------- */
.page-hero{border-bottom:var(--rule); padding:64px 0 40px;}
.page-hero h1{font-size:clamp(30px,4.2vw,48px); max-width:16ch;}
.page-body{padding:48px 0 64px;}
.not-found{padding:100px 0; text-align:left;}
.not-found h1{font-size:clamp(40px,7vw,84px); color:var(--manglar); margin-bottom:16px;}

/* ---------------------------------------------------
   13. WP CORE BLOCK SUPPORT
--------------------------------------------------- */
.alignwide{max-width:calc(var(--max) - 64px); margin-left:auto; margin-right:auto;}
.alignfull{width:100vw; margin-left:calc(50% - 50vw); max-width:100vw;}
.aligncenter{margin-left:auto; margin-right:auto;}
.alignleft{float:left; margin-right:20px;}
.alignright{float:right; margin-left:20px;}
.wp-caption-text,figcaption{font-size:13px; color:#4A524E; margin-top:6px;}
.wp-block-quote,blockquote{border-left:2px solid var(--manglar); padding-left:18px; color:var(--manglar-deep);}

/* ---------------------------------------------------
   14. FOOTER
--------------------------------------------------- */
footer.site{padding:26px 0 40px;}
footer.site .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
footer.site .fine{font-size:12.5px; color:#4A524E;}
footer.site .social{display:flex; gap:18px; font-size:13px;}
footer.site .social a:hover{color:var(--manglar);}