<div class="method-container">
<div class="method-content">
<!-- 1. Cabecera con etiqueta MÉTODO -->
<div class="method-header-wrapper reveal-left delay-1">
<span class="method-tag">MÉTODO</span>
<div class="method-line"></div>
</div>
<!-- 2. Título "CÓMO LO HACEMOS" -->
<h2 class="method-title reveal-left delay-2">
CÓMO LO HACEMOS
</h2>
<!-- 3. Texto descriptivo -->
<p class="method-description reveal-left delay-3">Carácter en la presencia. Precisión en la actuación.</p>
<!-- 4. Botón DESCUBRIR con flecha y línea inferior -->
<a href="/metodo" target="_top" class="btn-discover reveal-left delay-4">
<div class="btn-discover-top">
<span class="btn-discover-text">DESCUBRIR</span>
<span class="btn-discover-arrow">↗</span>
</div>
<div class="btn-discover-underline-container">
<div class="btn-discover-underline"></div>
</div>
</a>
</div>
</div>
<!-- Tipografía Barlow y Barlow Condensed -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Barlow:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
.method-container,
.method-container * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Ocupa exactamente 613x1119 px */
.method-container {
width: 613px;
height: 1119px;
max-width: 100%;
max-height: 100%;
padding: 60px 44px;
display: flex;
flex-direction: column;
justify-content: center;
background-color: #05070B !important;
font-family: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
color: #FFFFFF;
overflow: hidden;
}
.method-content {
width: 100%;
}
.method-header-wrapper {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 26px;
}
.method-tag {
font-size: 12px;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
color: #C5A880;
}
.method-line {
width: 50px;
height: 1px;
background-color: #C5A880;
box-shadow: 0 0 6px rgba(197, 168, 128, 0.4);
}
.method-title {
font-family: 'Barlow Condensed', 'Barlow', sans-serif;
font-size: 54px;
font-weight: 800;
letter-spacing: 2.5px;
text-transform: uppercase;
color: #FFFFFF;
line-height: 1.05;
margin-bottom: 26px;
}
.method-description {
font-size: 16px;
font-weight: 400;
letter-spacing: 0.5px;
line-height: 1.7;
color: #CCCCCC;
margin-bottom: 44px;
white-space: pre-line;
}
/* Botón DESCUBRIR */
.btn-discover {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
text-decoration: none;
cursor: pointer;
}
.btn-discover-top {
display: flex;
align-items: center;
gap: 12px;
}
.btn-discover-text {
font-size: 13px;
font-weight: 700;
letter-spacing: 3.5px;
text-transform: uppercase;
color: #FFFFFF;
transition: color 0.3s ease;
}
.btn-discover-arrow {
font-size: 15px;
color: #FFFFFF;
transition: transform 0.3s ease, color 0.3s ease;
}
.btn-discover-underline-container {
width: 100%;
margin-top: 6px;
}
.btn-discover-underline {
width: 33%;
height: 2px;
background-color: #C5A880;
box-shadow: 0 0 6px rgba(197, 168, 128, 0.4);
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
}
/* Efecto Hover */
.btn-discover:hover .btn-discover-text,
.btn-discover:hover .btn-discover-arrow {
color: #C5A880;
}
.btn-discover:hover .btn-discover-arrow {
transform: translate(3px, -3px);
}
.btn-discover:hover .btn-discover-underline {
width: 100%;
box-shadow: 0 0 14px #C5A880;
}
/* ANIMACIÓN REVEAL (De Izquierda a Derecha) */
.reveal-left {
opacity: 0;
transform: translateX(-50px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.reveal-left.visible {
opacity: 1;
transform: translateX(0);
}
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.25s; }
.delay-3 { transition-delay: 0.4s; }
.delay-4 { transition-delay: 0.55s; }
@media (prefers-reduced-motion: reduce) {
.reveal-left { transition: none; transform: none; opacity: 1; }
}
</style>
<script>
(function () {
var items = document.querySelectorAll(".method-container .reveal-left");
function showAll() {
items.forEach(function (el) { el.classList.add("visible"); });
}
if (!("IntersectionObserver" in window)) {
showAll();
return;
}
var observer = new IntersectionObserver(function (entries, obs) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.classList.add("visible");
obs.unobserve(entry.target);
}
});
}, { root: null, threshold: 0.25 });
setTimeout(function () {
items.forEach(function (el) { observer.observe(el); });
}, 100);
/* Seguro: si pasados 2,5 s algo sigue oculto, se muestra */
setTimeout(showAll, 2500);
})();
</script>
