/* Etiquetas sobre una foto (técnica de la plantilla Nopal de Scrolltide).
   El contenedor lleva position: relative y una foto con object-fit: cover.
   Toda la animación es CSS: data-on="true" dibuja la línea, enciende el punto
   y abre la etiqueta; «--retraso» escalona una etiqueta tras otra. */
.ef { position: relative; overflow: hidden; }
.ef__et { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; transform-origin: 0 0; will-change: transform; color: #fff; }
.ef__svg { position: absolute; left: 0; top: 0; overflow: visible; filter: drop-shadow(0 1px 2px rgba(4, 8, 28, 0.55)); }
.ef__linea { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) var(--retraso, 0s); }
.ef__punto { fill: currentColor; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) var(--retraso, 0s); }
.ef__caja { position: absolute; translate: 0 -50%; }
.ef__tag { display: block; white-space: nowrap; padding: 0.32rem 0.62rem; background: #fff; color: #0b2578; font: 600 12px/1.3 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0; clip-path: inset(0 100% 0 0); box-shadow: 0 6px 18px rgba(4, 8, 28, 0.25); transition: clip-path 0.65s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--retraso, 0s) + 0.35s), opacity 0.2s linear calc(var(--retraso, 0s) + 0.35s); }
.ef__c { position: absolute; width: 7px; height: 7px; border: 0 solid currentColor; opacity: 0; transition: opacity 0.3s linear calc(var(--retraso, 0s) + 0.45s), translate 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--retraso, 0s) + 0.45s); }
.ef__c--1 { left: -9px; top: -9px; border-left-width: 1px; border-top-width: 1px; translate: 6px 6px; }
.ef__c--2 { right: -9px; top: -9px; border-right-width: 1px; border-top-width: 1px; translate: -6px 6px; }
.ef__c--3 { left: -9px; bottom: -9px; border-left-width: 1px; border-bottom-width: 1px; translate: 6px -6px; }
.ef__c--4 { right: -9px; bottom: -9px; border-right-width: 1px; border-bottom-width: 1px; translate: -6px -6px; }
.ef__et[data-on='true'] .ef__linea { stroke-dashoffset: 0; }
.ef__et[data-on='true'] .ef__punto { transform: scale(1); }
.ef__et[data-on='true'] .ef__tag { opacity: 1; clip-path: inset(0 0 0 0); }
.ef__et[data-on='true'] .ef__c { opacity: 1; translate: 0 0; }
/* Al irse, rápido y todo junto. */
.ef__et[data-on='false'] .ef__linea, .ef__et[data-on='false'] .ef__tag, .ef__et[data-on='false'] .ef__c, .ef__et[data-on='false'] .ef__punto { transition-duration: 0.25s; transition-delay: 0s; }
/* Tema oscuro (campañas): etiqueta hueso sobre fondo noche. */
.ef--oscuro .ef__et { color: #f5f0ea; }
.ef--oscuro .ef__tag { background: #f5f0ea; color: #04081c; }
@media (prefers-reduced-motion: reduce) {
  .ef__linea, .ef__punto, .ef__tag, .ef__c { transition: none !important; }
}