/*
Theme Name: MHER
Theme URI: https://mhenergyandresources.com.co
Author: TAP Agencia
Author URI: https://tapagencia.com
Description: Tema de bloques de MH Energy & Resources S.A.S, construido sobre el manual de marca: paleta primaria #1D282F con secundarios #305946 y #CBDC86, títulos en Baloo 2 y texto en Roboto, y el sistema gráfico de diagonales tomado del logotipo.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.3
Version: 1.1.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mher
Tags: block-theme, full-site-editing, one-column, custom-colors, custom-logo, editor-style, translation-ready
*/

/* Los colores, tipografías y espacios viven en theme.json.
   Aquí solo va lo que el sistema gráfico del manual no puede expresar
   con ajustes de bloque: el rayo en diagonal, la filigrana y las
   divisiones diagonales entre secciones. */

:root{
  --mher-hairline:rgba(203,220,134,.15);
  --mher-beam-angle:20deg;       /* inclinación del rayo del logotipo */
}

/* --- Portada / pantalla de bienvenida --- */
.mher-portada{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
/* El layout «constrained» de WordPress centra sus hijos con
   margin-inline:auto !important; para alinear la columna a la izquierda
   hay que responder con la misma prioridad. */
.mher-portada > .mher-portada__contenido,
.mher-portada > .mher-portada__pie{
  width:100%;
  margin-inline:0 !important;
}
.mher-portada__contenido{
  max-width:min(34rem,100%);
}
/* El pie de la portada cruza todo el ancho útil, no la columna de contenido */
.mher-portada > .mher-portada__pie{max-width:none !important}
.mher-portada__pie{margin-top:auto}
.mher-portada::before,
.mher-portada::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
}
/* resplandor + cuadrícula: la cuadrícula organiza, pero no limita */
.mher-portada::before{
  inset:0;
  background:
    radial-gradient(48% 46% at 84% 16%,rgba(48,89,70,.55),transparent 72%),
    radial-gradient(38% 34% at 98% 76%,rgba(203,220,134,.07),transparent 74%),
    repeating-linear-gradient(90deg,var(--mher-hairline) 0 1px,transparent 1px 12.5%);
}
/* el rayo */
.mher-portada::after{
  top:-30%;
  left:76%;
  width:clamp(64px,8.5vw,132px);
  height:160%;
  transform:rotate(var(--mher-beam-angle));
  background:linear-gradient(180deg,transparent,rgba(48,89,70,.9) 24%,rgba(203,220,134,.7) 74%,transparent);
  filter:blur(16px);
  opacity:.34;
  animation:mher-rayo 7.5s ease-in-out infinite;
}
/* el rayo respira: la energía nunca está quieta */
@keyframes mher-rayo{
  0%,100%{opacity:.26;transform:rotate(var(--mher-beam-angle)) scaleY(1)}
  50%{opacity:.44;transform:rotate(var(--mher-beam-angle)) scaleY(1.05)}
}
.mher-portada__marca{
  position:absolute;
  z-index:-1;
  top:50%;
  right:-4vw;
  width:min(44vw,520px);
  aspect-ratio:1769/1203;
  transform:translateY(-52%);
  background:var(--wp--preset--gradient--marca);
  -webkit-mask:url("assets/img/monograma-mher.png") no-repeat center/contain;
  mask:url("assets/img/monograma-mher.png") no-repeat center/contain;
  opacity:.1;
  pointer-events:none;
}
.mher-portada__logo img{width:clamp(215px,26vw,330px);height:auto}

/* Entrada en cascada: la portada se arma de arriba abajo al cargar.
   `backwards` mantiene el estado inicial durante el retardo, así nada
   parpadea antes de tiempo. */
.mher-portada__contenido > *{
  animation:mher-entrada .9s cubic-bezier(.22,.61,.36,1) backwards;
}
.mher-portada__contenido > :nth-child(1){animation-delay:.10s}
.mher-portada__contenido > :nth-child(2){animation-delay:.22s}
.mher-portada__contenido > :nth-child(3){animation-delay:.34s}
.mher-portada__contenido > :nth-child(4){animation-delay:.46s}
.mher-portada__contenido > :nth-child(5){animation-delay:.58s}
@keyframes mher-entrada{from{opacity:0;transform:translateY(1.25rem)}to{opacity:1;transform:none}}

/* La filigrana entra después, revelándose desde el borde como en el manual */
.mher-portada__marca{animation:mher-filigrana-entra 1.6s ease-out .35s backwards}
@keyframes mher-filigrana-entra{from{opacity:0;transform:translateY(-52%) translateX(3rem)}}

/* --- Cintillo: rótulo corto con filete, como los rótulos del manual --- */
.mher-cintillo{
  font-size:var(--wp--preset--font-size--xs);
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--wp--preset--color--lima);
}
.mher-cintillo::before{
  content:"";
  display:inline-block;
  width:2.25rem;
  height:1px;
  margin-right:.85rem;
  vertical-align:.32em;
  background:currentColor;
  opacity:.55;
}

/* --- Insignia de estado --- */
.mher-insignia{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin:0;
  padding:.55rem 1.05rem .55rem .85rem;
  border:1px solid var(--mher-hairline);
  background:rgba(48,89,70,.28);
  font-size:var(--wp--preset--font-size--xs);
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.mher-insignia svg{
  width:.85rem;
  height:1.1rem;
  fill:var(--wp--preset--color--lima);
  animation:mher-chispa 3.2s ease-in-out infinite;
}
@keyframes mher-chispa{0%,62%,100%{opacity:.55}72%{opacity:1}78%{opacity:.6}86%{opacity:1}}

/* --- Estilos de bloque: divisiones diagonales y filigrana --- */
.is-style-mher-diagonal{
  position:relative;
  clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 7vw));
}
.is-style-mher-diagonal-inversa{
  position:relative;
  clip-path:polygon(0 7vw,100% 0,100% 100%,0 100%);
}
.is-style-mher-filigrana{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.is-style-mher-filigrana::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:50%;
  right:-6%;
  width:min(38vw,440px);
  aspect-ratio:1769/1203;
  transform:translateY(-50%);
  background:var(--wp--preset--gradient--marca);
  -webkit-mask:url("assets/img/monograma-mher.png") no-repeat center/contain;
  mask:url("assets/img/monograma-mher.png") no-repeat center/contain;
  opacity:.08;
  pointer-events:none;
}

/* --- Detalles generales --- */
.mher-medida-texto.mher-medida-texto{max-width:min(34rem,100%);margin-inline:0 !important}
.mher-pie{border-top:1px solid var(--mher-hairline)}
.wp-site-blocks :where(a:focus-visible){outline:2px solid var(--wp--preset--color--lima);outline-offset:3px}
.skip-link:focus{
  position:fixed;
  top:1rem;
  left:1rem;
  z-index:99;
  padding:.65rem 1rem;
  border-radius:6px;
  background:var(--wp--preset--color--lima);
  color:var(--wp--preset--color--primario);
}

@media (max-width:640px){
  .mher-portada::after{left:82%}
  .mher-portada__marca{width:96vw;right:-34vw;opacity:.075}
  .mher-cintillo{letter-spacing:.12em;line-height:1.7}
  .mher-cintillo::before{display:none}
  .is-style-mher-diagonal{clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 12vw))}
  .is-style-mher-diagonal-inversa{clip-path:polygon(0 12vw,100% 0,100% 100%,0 100%)}
}

@media (prefers-reduced-motion:reduce){
  .mher-insignia svg,
  .mher-portada::after,
  .mher-portada__contenido > *,
  .mher-portada__marca{animation:none}
}