/*
Theme Name: Ástil Mosaico Empresarial
Theme URI: https://astil.com.mx
Author: Ástil
Description: Tema ligero para astil.com.mx. Presenta al grupo y a cada empresa asociada como un mosaico. Las empresas son entradas del tipo "Empresas" y se editan desde el panel.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: astil
*/
:root{--navy:#002f87;--teal:#00aebd;--teal-d:#008d9a;--green:#6ecb98;--lime:#b7dc78;--mint:#34d9c3;--ink:#0e2240;--muted:#4b5d78;--soft:#f1f9fa;--line:#d9e6ea;--radius:18px;--max:1120px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font:17px/1.65 "Segoe UI",Calibri,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--teal-d)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.15;margin:0 0 .5em;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5vw,3.6rem)}
h2{font-size:clamp(1.6rem,3vw,2.2rem);color:var(--navy)}
h3{font-size:1.2rem}
.eyebrow{display:inline-block;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d);font-weight:600;margin-bottom:.6rem}
/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.brand img{height:52px;width:auto;display:block}
.nav{display:flex;gap:6px;flex-wrap:wrap}
.nav a{text-decoration:none;color:var(--ink);padding:8px 12px;border-radius:999px;font-size:.95rem}
.nav a:hover{background:var(--soft);color:var(--teal-d)}
.nav a.cta{background:var(--navy);color:#fff}
.nav a.cta:hover{background:var(--teal-d)}
/* hero */
.hero{position:relative;color:#fff;background:#00a0b0 url(assets/hero.jpg) center/cover;padding:clamp(64px,11vw,130px) 0 clamp(64px,10vw,110px)}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(0,47,135,.78),rgba(0,174,189,.25) 70%)}
.hero .wrap{position:relative}
.hero p.lead{font-size:clamp(1.05rem,2vw,1.3rem);max-width:640px;margin:1.1rem 0 2rem;opacity:.95}
.hero .eyebrow{color:#d7f6f9}
.btn{display:inline-block;padding:13px 26px;border-radius:999px;text-decoration:none;font-weight:600;border:2px solid transparent}
.btn-primary{background:#fff;color:var(--navy)}
.btn-primary:hover{background:var(--lime)}
.btn-ghost{border-color:rgba(255,255,255,.7);color:#fff;margin-left:8px}
.btn-ghost:hover{background:rgba(255,255,255,.15)}
/* sections */
section.s{padding:clamp(52px,8vw,92px) 0}
section.soft{background:var(--soft)}
.two{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:start}
.areas{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.areas li{padding:12px 16px;border-left:4px solid var(--teal);background:#fff;border-radius:0 12px 12px 0;box-shadow:0 1px 0 var(--line)}
/* mosaic */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:30px}
.tile{grid-column:span 2;position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:210px;padding:24px;border-radius:var(--radius);text-decoration:none;color:#fff;overflow:hidden;transition:transform .2s,box-shadow .2s}
.tile:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,47,135,.22)}
.tile:nth-child(1),.tile:nth-child(2),.tile:nth-child(6),.tile:nth-child(7){grid-column:span 3}
.tile.navy{background:var(--navy)}
.tile.teal{background:var(--teal)}
.tile.green{background:var(--green);color:var(--ink)}
.tile:after{content:"";position:absolute;right:-26px;bottom:-26px;width:110px;height:110px;background:rgba(255,255,255,.14);border-radius:22px;transform:rotate(45deg)}
.tile h3{font-size:1.4rem;margin:0 0 .3rem;position:relative}
.tile p{margin:0;font-size:.95rem;opacity:.92;position:relative}
.tile .go{margin-top:18px;font-weight:600;position:relative}
/* ástil meaning */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.card b{display:block;color:var(--teal-d);font-size:2rem;line-height:1;margin-bottom:10px}
.card p{margin:0;color:var(--muted)}
/* principles */
.principles{counter-reset:p;list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 28px}
.principles li{counter-increment:p;position:relative;padding:14px 16px 14px 62px;background:#fff;border:1px solid var(--line);border-radius:14px}
.principles li:before{content:counter(p);position:absolute;left:14px;top:12px;width:34px;height:34px;border-radius:10px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:600}
.principles li:nth-child(3n+2):before{background:var(--teal)}
.principles li:nth-child(3n):before{background:var(--green);color:var(--ink)}
/* cta */
.cta-band{background:var(--navy);color:#fff;text-align:center}
.cta-band h2{color:#fff}
.cta-band p{max-width:640px;margin:0 auto 1.6rem;opacity:.92}
.cta-band .btn-primary:hover{background:var(--mint)}
/* single company */
.co-hero{color:#fff;padding:clamp(48px,8vw,90px) 0}
.co-hero.navy{background:var(--navy)}.co-hero.teal{background:var(--teal)}.co-hero.green{background:var(--green);color:var(--ink)}
.co-hero a.back{color:inherit;opacity:.85;text-decoration:none;font-size:.95rem}
.co-hero .eyebrow{color:inherit;opacity:.85}
.co-hero p{font-size:1.15rem;margin:.4rem 0 1rem;max-width:720px}
.co-hero .site{display:inline-block;color:inherit;font-weight:600}
.entry{padding:clamp(40px,6vw,72px) 0}
.entry .wrap{max-width:860px}
.entry h2{margin-top:2.2rem}
.entry ul.astil-lista{padding-left:1.1rem;columns:2;column-gap:36px}
.entry ul.astil-lista li{break-inside:avoid;margin-bottom:.45rem}
.entry ul.astil-chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.entry ul.astil-chips li{background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:5px 14px;font-size:.92rem}
.persona{background:var(--soft);border-left:5px solid var(--teal);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;margin:18px 0}
.persona h3{margin:0}
.persona .cargo{color:var(--teal-d);font-weight:600;margin:.1rem 0 .7rem}
.persona p{margin:.4rem 0}
.others{padding:0 0 70px}
.others .wrap{max-width:var(--max)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.chips a{padding:9px 18px;border-radius:999px;border:1px solid var(--line);text-decoration:none;color:var(--ink)}
.chips a:hover{border-color:var(--teal);color:var(--teal-d)}
/* footer */
.site-footer{background:#08162e;color:#b9c6da;padding:34px 0;font-size:.92rem}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
.site-footer a{color:#fff}
@media(max-width:860px){
 .two{grid-template-columns:1fr}.cards{grid-template-columns:1fr}.principles{grid-template-columns:1fr}
 .mosaic{grid-template-columns:repeat(2,1fr)}.tile,.tile:nth-child(n){grid-column:span 1}
 .entry ul.astil-lista{columns:1}
 .nav a:not(.cta){display:none}
}
@media(max-width:520px){.mosaic{grid-template-columns:1fr}.btn-ghost{margin:10px 0 0}}