/* =========================================================
   Fundación Colindres — Capa v5: marcadores técnicos
   Todos los espacios de foto / banner / video van en gris plano,
   sin diseño, con marca técnica: nombre, medidas y contenido.
   Al colocar la imagen real (ver COMO-EDITAR.md) el marcador
   se elimina o se oculta solo.
   ========================================================= */

.tech{
  position:relative;overflow:hidden;width:100%;height:100%;
  background:#DFE3E1;color:#4A5450;
  display:grid;place-items:center;text-align:center;
  box-shadow:inset 0 0 0 2px #B9C0BC;
  font-family:var(--font-body);
}
.tech--fill{position:absolute;inset:0}
.tech--dark{background:#5E6864;color:#F3F5F4;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.tech__lines{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#B9C0BC;stroke-width:1.5;opacity:.9}
.tech--dark .tech__lines{stroke:rgba(255,255,255,.28)}
/* esquinas de registro */
.tech__c{position:absolute;width:22px;height:22px;border:2px solid #7C8782}
.tech--dark .tech__c{border-color:rgba(255,255,255,.7)}
.tech__c--tl{left:10px;top:10px;border-right:0;border-bottom:0}
.tech__c--tr{right:10px;top:10px;border-left:0;border-bottom:0}
.tech__c--bl{left:10px;bottom:10px;border-right:0;border-top:0}
.tech__c--br{right:10px;bottom:10px;border-left:0;border-top:0}
/* cruz central */
.tech__cross{position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%);opacity:.7}
.tech__cross::before,.tech__cross::after{content:"";position:absolute;background:#7C8782}
.tech__cross::before{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%)}
.tech__cross::after{top:50%;left:0;height:1.5px;width:100%;transform:translateY(-50%)}
.tech--dark .tech__cross::before,.tech--dark .tech__cross::after{background:rgba(255,255,255,.75)}
/* etiqueta */
.tech__label{
  position:relative;z-index:1;display:grid;gap:4px;padding:12px 18px;border-radius:10px;
  background:rgba(255,255,255,.88);color:#2E3733;border:1px dashed #8A948F;max-width:min(86%,420px);
}
.tech--dark .tech__label{background:rgba(20,28,24,.72);color:#F3F5F4;border-color:rgba(255,255,255,.55)}
.tech__label b{font-size:.68rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.tech__dims{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.05rem;font-weight:700;letter-spacing:.02em}
.tech__label small{font-size:.78rem;line-height:1.35;opacity:.85}
@media (max-width:560px){.tech__label{padding:10px 12px}.tech__dims{font-size:.92rem}.tech__label small{font-size:.72rem}}
.tech--round{border-radius:50%}
.tech--round .tech__c{display:none}

/* ---- Contextos: el marcador reemplaza la ilustración ---- */
.hero{background:#5E6864}
.hero::before{background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.08) 45%,rgba(0,0,0,.38))}
.hero__scene{position:absolute;inset:0;z-index:-2;transform:none !important}
.hero__scene .tech__label{position:absolute;right:18px;top:18px;margin:0;width:max-content;max-width:min(70%,420px);text-align:left;padding:8px 12px;gap:2px}
.hero__scene .tech__dims{font-size:.9rem}
@media (max-width:560px){.hero__scene .tech__label{right:50%;transform:translateX(50%);top:14px;max-width:88%;text-align:center}}
.hero__grain{display:none}
.hero__motes{display:none}
.hero.has-photo .hero__scene{display:none}
.page-hero{background:#5E6864}
.page-hero::before{background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.15))}
.page-hero__scene{position:absolute;inset:0;z-index:-2}
.page-hero__scene .tech__label{position:absolute;right:24px;bottom:22px;margin:0;text-align:left;width:max-content;max-width:min(60%,440px)}
@media (max-width:860px){.page-hero{padding-bottom:170px}.page-hero__scene .tech__label{right:50%;transform:translateX(50%);bottom:24px;text-align:center;max-width:86%}}
.card--art .card__media{background:#DFE3E1;aspect-ratio:16/10;display:block}
.card--art .card__media::after{display:none}
.card--art .card__media .tech__label{padding:8px 12px;gap:2px}
.card--art .card__media .tech__dims{font-size:.9rem}
.card--art .card__media small{display:none}
.card--art .card__media .tech__c{width:14px;height:14px}
.split__media,.project__media{background:#DFE3E1;box-shadow:var(--shadow-sm)}
.split__media::after{display:none}
.legacy__photo{background:#DFE3E1;box-shadow:inset 0 0 0 10px #fff,var(--shadow-sm)}
.legacy__photo .tech__label{max-width:76%}
.video{background:#5E6864;box-shadow:var(--shadow-sm)}
.video .tech__label{max-width:80%}

/* ---- Desactivar efectos de "diseño" sobre los marcadores ---- */
.tech svg{animation:none !important}
.px > .tech,.wipe > .tech{transform:none !important}
.wipe::before{display:none}
.wipe > *{opacity:1 !important;transform:none !important}
.card--art:hover .card__media svg{transform:none}

/* ---- Logo: emblema sin texto, grande; blanco sobre fondos oscuros ---- */
.brand img{width:64px;height:64px;object-fit:contain;background:none;border-radius:0;padding:0}
.nav{min-height:84px}
.footer .brand{align-items:center;gap:16px}
.footer .brand img.brand__white{width:96px;height:96px;background:none;border-radius:0;padding:0;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.loader__inner img{width:140px;height:140px;background:none;border-radius:0;padding:0;filter:drop-shadow(0 10px 30px rgba(0,0,0,.4))}
.connect .logo{width:150px}
@media (max-width:420px){.brand img{width:52px;height:52px}.nav{min-height:76px}}

/* ---- Pantalla de carga: fondo blanco, emblema a color y grande ---- */
.loader{background:#fff;color:var(--green-dark)}
.loader__inner img{width:160px;height:160px;filter:drop-shadow(0 14px 30px rgba(23,79,58,.18))}
.loader__word{color:var(--green)}
.loader__bar{background:var(--green-soft)}
.loader__bar i{background:var(--gold)}
@keyframes loader-out{to{opacity:0;visibility:hidden;clip-path:inset(0 0 100% 0)}}