/* =========================================================== home.css · Estilos exclusivos para la plantilla “MCH – Home genérica” Se carga sólo en la portada (is_front_page). Añade la clase mch-home al desde la plantilla: > =========================================================== */ /* ─── Helpers ─────────────────────────────────────────────── */ .mch-home .alignfull{margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);width:100vw;overflow:hidden} .mch-home .wrap{width:min(1200px,90%);margin-inline:auto} .mch-home .center{text-align:center} /* ─── Tipografía & spacing ───────────────────────────────── */ .mch-home section{padding-block:4rem;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif} .mch-home h1, .mch-home h2, .mch-home h3, .mch-home h4, .mch-home h5, .mch-home h6{font-weight:600;letter-spacing:-.01em;margin:0 0 1.5rem;color:var(--ast-global-color-8)} .mch-home p, .mch-home li, .mch-home td, .mch-home th{line-height:1.55;font-size:1rem;color:var(--ast-global-color-1)} .mch-home ul{margin:0;padding-left:1.2rem} .mch-home button, .mch-home .button, .mch-home input[type=submit]{font-weight:600;cursor:pointer;border:none;border-radius:.5rem;transition:.2s} /* ─── HERO ──────────────────────────────────────────────── */ /* El PNG + el degradado se añaden inline desde PHP */ .mch-home .hero { position: relative; /* necesario para que ::after se superponga */ color: var(--ast-global-color-5); text-align: center; padding-block: 6rem 8rem; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; } .mch-home .hero .wrap { position: relative; z-index: 1; } .mch-home .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(256deg, #05668D, #3dcbdb 70%); z-index: 0; } .mch-home .hero h1{font-size:clamp(1.8rem,4vw,3.2rem);line-height:1.2;margin-bottom:2rem} .mch-home .mch-search{display:flex;max-width:600px;margin-inline:auto} .mch-home .mch-search input{flex:1;padding:.85rem 1rem;border-radius:.6rem 0 0 .6rem;border:1px solid var(--ast-global-color-3)} .mch-home .mch-search button{padding:.85rem 1.4rem;background:var(--ast-global-color-0);color:var(--ast-global-color-5);border-radius:0 .6rem .6rem 0} .mch-home .mch-search button:hover{filter:brightness(.9)} /* ─── PROCESO DE SELECCIÓN ─────────────────────────────── */ .mch-home .process{background:var(--ast-global-color-5)} .mch-home .process h2{color:var(--ast-global-color-8)} .mch-home .info-boxes{display:grid;gap:2rem;margin-top:3rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .mch-home .info-boxes .box{background:var(--ast-global-color-5);color:var(--ast-global-color-8);border-radius:1rem;padding:2rem 1.4rem;text-align:center;box-shadow:0 12px 28px rgba(0,0,0,.06);transition:transform .25s} .mch-home .info-boxes .box:hover{transform:translateY(-6px)} .mch-home .info-boxes img{width:70px;margin-bottom:1rem;aspect-ratio:1/1;object-fit:cover;border-radius:.3rem} /* ─── BLOQUE “PARA EMPRESAS” ───────────────────────────── */ .mch-home .empresas{background:var(--ast-global-color-5);box-shadow:inset 0 8px 36px rgba(0,0,0,.05)} .mch-home .grid-2{display:grid;gap:3rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:center} .mch-home .empresas figure img{width:100%;max-width:320px;margin-inline:auto} .mch-home .empresas h2{color:var(--ast-global-color-8)} .mch-home .empresas .button{ margin:20px auto 0; display:flex; justify-content:center; gap:.6rem; padding:.9rem 1.6rem; background:var(--ast-global-color-0); color:var(--ast-global-color-5) } .mch-home .empresas .button:hover{filter:brightness(.9)} /* ─── MÉTODO / TABLA ───────────────────────────────────── */ .mch-home .metodo h3{color:var(--ast-global-color-8)} .mch-home .metodo table{width:100%;border-collapse:collapse;margin-top:2rem} .mch-home .metodo thead th{color:var(--ast-global-color-5);background:linear-gradient(90deg,var(--ast-global-color-0) 0%,rgba(1,112,185,.85) 100%);padding:.9rem 1rem} .mch-home .metodo td{padding:.9rem 1rem;border-bottom:1px solid var(--ast-global-color-6)} .mch-home .metodo tbody tr:nth-child(even){background:var(--ast-global-color-6)} /* ─── CONTADORES ───────────────────────────────────────── */ .mch-home .counter{text-align:center} .mch-home .counters{background:var(--ast-global-color-0);color:#fff;padding:4rem 0} .mch-home .counters .wrap{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .mch-home .counters .num{font-size:3.2rem;font-weight:700;position:relative} .mch-home .counters .num::before{content:"+"} .mch-home .counters p, .mch-home .counters .suf{color:#fff;margin:0} /* ─── RANKINGS ────────────────────────────────────────── */ .mch-home .rankings{background:var(--ast-global-color-5)} .mch-home .rankings h2{color:var(--ast-global-color-8);margin-top:3rem;margin-bottom:1.5rem} /* ─── Custom Post Grid ───────────────────────────────── */ .mch-home .custom-post-grid-container{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:40px 0} .mch-home .custom-post-grid-item{background:#fff;border:1px solid #e0e0e0;border-radius:12px;overflow:hidden;box-shadow:0 0 4px rgba(0,0,0,.08);transition:transform .3s,box-shadow .3s;display:flex;flex-direction:column} .mch-home .custom-post-grid-item:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.1)} .mch-home .custom-post-link{color:inherit;text-decoration:none;display:flex;flex-direction:column;height:100%} .mch-home .custom-post-img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s} .mch-home .custom-post-grid-item:hover .custom-post-img{transform:scale(1.05)} .mch-home .custom-post-title{text-align:center;font-size:.95rem;margin:10px;color:#333;line-height:1.4} /* ─── breakpoints ─────────────────────────────────────── */ @media (max-width:1024px){ .mch-home .custom-post-grid-container{grid-template-columns:repeat(3,1fr)} } @media (max-width:600px){ .mch-home .custom-post-grid-container{grid-template-columns:repeat(2,1fr)} .mch-home .custom-post-title{font-size:.9rem;margin:8px} } @media (max-width:480px){ .mch-home .hero{padding-block:4rem 6rem; min-height: 260px;} .mch-home .mch-search input{padding:.7rem .9rem} .mch-home .mch-search button{padding:.7rem 1.1rem} }