/* =============================================================================
   ZOLEOZ — Motivo "Rayos" y base tipográfica
   Manual de Marca ZOLEOZ · sec. 1.6 (págs. 20-22)
   -----------------------------------------------------------------------------
   El módulo "rayo" es un contenedor con un ángulo de 3° en uno de sus lados
   HORIZONTALES, en armonía con los rayos del símbolo Z-Sol.

   REGLAS DEL MANUAL, y cómo se implementan aquí:

   · 3° exactos, nunca otro ángulo         → --rayo-angulo, sin excepciones
   · Terminaciones sutilmente redondeadas  → variantes .rayo-mod (transform+radio)
   · …salvo lados que sangran con el borde
     del formato, que van rectos           → variantes .rayo-banda (clip-path)
   · Giro de 180° para pasar la inclinación
     de abajo a arriba                     → .rayo-banda-sup / .rayo-banda-inf
   · Reflejo para invertir la dirección    → sufijo -esp (espejo)
   · Superposición de dos módulos: uno
     contenedor de texto/logo, otro de
     imagen                                → .rayo-duo

   USOS INCORRECTOS que este archivo hace imposibles o evita (pág. 22):
   a. Dos rayos con distinta dirección en una misma composición
   b. Doble inclinación en un mismo módulo
   c. Inclinación distinta de 3°
   d. Terminaciones redondas muy amplias
   e. Degradados, brillos o reflejos sobre el rayo
   f. Giros libres distintos de 180°
   g. Logo pegado contra los bordes del rayo
   h. Terminaciones rectas donde no hay sangrado
   ========================================================================== */

:root {
  --rayo-angulo: 3deg;
  /* Desplazamiento vertical del lado inclinado en una banda a todo el ancho:
     100vw · tan(3°) = 5.2408vw. De aquí sale el ángulo exacto. */
  --rayo-dy: 5.2408vw;
  /* Redondeo "sutil". Deliberadamente pequeño: el manual marca como incorrecto
     el uso de terminaciones redondas muy amplias. */
  --rayo-radio: 10px;
}

/* --- Base ---------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body { background: #fff; color: #153537; -webkit-font-smoothing: antialiased; }

/* La barra de navegación es fija: las secciones ancladas deben dejarle sitio
   para no quedar por debajo al saltar desde el menú. */
section[id], footer[id] { scroll-margin-top: 5rem; }

/* Titulares: tracking 0, leading automático, kerning óptico (pág. 17). */
.titular {
  font-family: Newsreader, Georgia, serif; /* sustituto de Canela Deck Medium */
  font-weight: 500;
  letter-spacing: 0;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}

/* Iconos: Material Symbols Outlined · wght 400 · opsz 40 · GRAD 0 (pág. 18). */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 40;
  vertical-align: middle;
}

::selection { background: #EFEE79; color: #153537; }

/* =============================================================================
   A. BANDAS QUE SANGRAN — terminaciones rectas
   El lado que toca el borde del formato va recto; el opuesto lleva los 3°.
   Pensadas para ocupar todo el ancho de la ventana.
   ========================================================================== */

/* Inclinación en el lado INFERIOR */
.rayo-banda-inf     { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--rayo-dy))); }
.rayo-banda-inf-esp { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--rayo-dy)), 0 100%); }

/* Inclinación en el lado SUPERIOR (giro de 180° del anterior) */
.rayo-banda-sup     { clip-path: polygon(0 var(--rayo-dy), 100% 0, 100% 100%, 0 100%); }
.rayo-banda-sup-esp { clip-path: polygon(0 0, 100% var(--rayo-dy), 100% 100%, 0 100%); }

/* Sección con inclinación arriba y abajo: el módulo mantiene UNA sola dirección
   (ambos lados descienden hacia el mismo costado), por lo que no constituye la
   "doble inclinación" que el manual prohíbe. */
.rayo-banda-ambos   { clip-path: polygon(0 var(--rayo-dy), 100% 0, 100% calc(100% - var(--rayo-dy)), 0 100%); }

/* =============================================================================
   B. MÓDULOS FLOTANTES — terminaciones sutilmente redondeadas
   No sangran con el borde, así que llevan redondeo. Se inclinan con transform
   para conservar el border-radius; el contenido se contra-inclina para que el
   texto quede horizontal.
   ========================================================================== */

.rayo-mod {
  transform: skewY(var(--rayo-angulo));   /* costado derecho más bajo */
  border-radius: var(--rayo-radio);
  /* g. el logo y el texto nunca contra el borde: el padding lo garantiza */
}
.rayo-mod-esp { transform: skewY(calc(-1 * var(--rayo-angulo))); }

/* Contra-inclinación del contenido */
.rayo-mod     > .rayo-cont { display: block; transform: skewY(calc(-1 * var(--rayo-angulo))); }
.rayo-mod-esp > .rayo-cont { display: block; transform: skewY(var(--rayo-angulo)); }

/* =============================================================================
   C. SUPERPOSICIÓN DE DOS MÓDULOS
   El gesto característico del manual: un módulo contenedor de imagen y, encima,
   uno contenedor de texto y/o logo. Ambos comparten dirección de inclinación
   — requisito del manual (incorrecto "a": dos rayos con distinta dirección).
   ========================================================================== */

.rayo-duo { position: relative; }
.rayo-duo > .rayo-img {
  transform: skewY(var(--rayo-angulo));
  border-radius: var(--rayo-radio);
  overflow: hidden;
}
.rayo-duo > .rayo-img > img { display: block; width: 100%; height: 100%; object-fit: cover;
                              transform: skewY(calc(-1 * var(--rayo-angulo))) scale(1.06); }
.rayo-duo > .rayo-txt {
  position: absolute;
  transform: skewY(var(--rayo-angulo));
  border-radius: var(--rayo-radio);
}
.rayo-duo > .rayo-txt > .rayo-cont { display: block; transform: skewY(calc(-1 * var(--rayo-angulo))); }

/* =============================================================================
   D. Marcador de fotografía pendiente
   El manual dedica una sección al estilo fotográfico (imágenes reales de las
   operaciones, luz natural, acción humana). Mientras el grupo no entregue el
   banco de fotos, se reserva el espacio en lugar de rellenar con stock ajeno.
   ========================================================================== */

.foto-pendiente {
  background:
    repeating-linear-gradient(135deg,
      rgba(21, 53, 55, .05) 0 10px,
      rgba(21, 53, 55, .02) 10px 20px),
    rgba(21, 53, 55, .04);
  display: flex; align-items: center; justify-content: center;
  color: rgba(21, 53, 55, .45);
}

/* --- Utilidades ---------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px);
          transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

.lk { position: relative; }
.lk::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 0; height: 2px;
             background: #EFEE79; transition: width .25s; }
.lk:hover::after { width: 100%; }

/* Marca de dato no confirmado por el grupo.
   Solo colores de la paleta: fondo = esmeralda al 14 %, texto = verde petróleo. */
.pv { display: inline-flex; align-items: center; gap: .25rem; font-size: .68rem; font-weight: 700;
      letter-spacing: .04em; text-transform: uppercase; padding: .12rem .45rem; border-radius: 3px;
      background: rgba(0, 195, 137, .14); color: #153537; white-space: nowrap; }
.pv-oscuro { background: rgba(239, 238, 121, .18); color: #EFEE79; }