/*V 1.0 Shared Recent Projects - comparador antes/despues por proyecto, rejilla en escritorio y fila deslizable con puntos en movil. Traido del generador de landings (src/sections/projects).*/

/* === 1. Seccion y rejilla === */
.projects-showcase {--projects-muted:#666; --projects-soft:#555; --projects-accent:#209b41; background-color:var(--light-gray); padding:clamp(40px, 8vw, 80px) 0; width:100%;}
.projects-grid {position:relative; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(20px, 3vw, 30px); max-width:1200px; margin:0 auto;}
.project-card {display:flex; flex-direction:column; background-color:var(--primary-white); border-radius:12px; overflow:hidden; box-shadow:0 6px 20px rgba(0, 0, 0, 0.08);}
.project-card.scrolled:hover {transform:translateY(-4px); box-shadow:0 12px 28px rgba(0, 0, 0, 0.14); border-radius:12px;}

/* === 2. Comparador: la foto de antes se recorta encima de la de despues hasta la linea (--pos) === */
.compare {position:relative; aspect-ratio:4 / 3; overflow:hidden; user-select:none; -webkit-user-select:none; background-color:var(--border-color);}
.compare img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.compare-before {clip-path:inset(0 calc(100% - var(--pos)) 0 0);}
.compare-tag {position:absolute; top:12px; z-index:1; padding:4px 10px; border-radius:999px; background-color:rgba(0, 0, 0, 0.68); color:var(--primary-white); font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; pointer-events:none;}
.compare-tag--before {left:12px;}
.compare-tag--after {right:12px;}
.compare-handle {position:absolute; top:0; bottom:0; left:var(--pos); z-index:2; width:3px; background-color:var(--primary-white); transform:translateX(-50%); box-shadow:0 0 10px rgba(0, 0, 0, 0.35); pointer-events:none;}
.compare-knob {position:absolute; top:50%; left:50%; display:flex; align-items:center; justify-content:center; gap:2px; width:42px; height:42px; border-radius:50%; background-color:var(--primary-white); color:var(--primary-black); font-size:12px; transform:translate(-50%, -50%); box-shadow:0 3px 12px rgba(0, 0, 0, 0.3); transition:transform 0.2s ease;}
/* Pista: la linea se mueve sola una vez al aparecer (--pos registrada para poder animarla) */
@property --pos {syntax:"<percentage>"; inherits:true; initial-value:50%;}
@keyframes compare-hint {0% {--pos:50%;} 30% {--pos:30%;} 70% {--pos:70%;} 100% {--pos:50%;}}
.compare.is-hinting {animation:compare-hint 1.8s ease-in-out 1;}
/* El input ocupa toda la foto, invisible: arrastrar en cualquier punto mueve la linea */
.compare-range {position:absolute; inset:0; z-index:3; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none;}
.compare-range:active ~ .compare-handle .compare-knob {transform:translate(-50%, -50%) scale(1.1);}
.compare-range:focus-visible ~ .compare-handle .compare-knob {outline:3px solid var(--primary-black); outline-offset:3px;}

/* === 3. Texto de la tarjeta: tipo o cliente, titulo, descripcion y ubicacion === */
.project-body {display:grid; gap:4px; padding:clamp(16px, 2.4vw, 20px);}
.project-type {font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--projects-muted);}
.project-type--client {display:flex; align-items:center; gap:6px; color:var(--primary-black);}
.project-type--client > i {flex:none; font-size:12px;}
.project-body h3 {font-size:clamp(16px, 2.2vw, 18px); font-weight:700; line-height:1.3; color:var(--primary-black);}
.project-desc {font-size:14px; line-height:1.5; color:var(--projects-soft);}
.project-location {display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13px; color:var(--projects-soft);}
.project-location > i {color:var(--projects-accent);}
/* Comercial: enlace a Google Maps junto a la ubicacion */
.project-map {display:inline-flex; align-items:center; gap:5px; margin-left:auto; font-size:12px; font-weight:600; color:var(--primary-black); text-decoration:underline; text-underline-offset:3px;}
.project-map:hover {color:var(--projects-accent);}
.project-map:focus-visible {outline:3px solid var(--primary-black); outline-offset:2px;}

/* === 4. Ver en grande: el boton se ve de 36 px y el borde transparente da 44 px de zona de toque === */
.compare-expand {position:absolute; right:6px; bottom:6px; z-index:4; display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:44px; height:44px; border:4px solid transparent; background-clip:padding-box; border-radius:50%; background-color:rgba(0, 0, 0, 0.62); color:var(--primary-white); font-size:14px; cursor:pointer; transition:background-color 0.2s ease, transform 0.2s ease;}
.compare-expand:hover {background-color:rgba(0, 0, 0, 0.85); transform:scale(1.08);}
.compare-expand:focus-visible {outline:3px solid var(--primary-white); outline-offset:-2px;}
.compare-dialog {margin:auto; width:min(1100px, calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:0; border:none; border-radius:14px; background-color:var(--primary-black); color:var(--primary-white); overflow:hidden;}
.compare-dialog::backdrop {background-color:rgba(0, 0, 0, 0.82);}
.compare-dialog .compare {aspect-ratio:16 / 9; max-height:calc(100vh - 110px);}
.compare-dialog .compare-expand {display:none;}
.compare-dialog .compare-tag--after {right:64px;}
.compare-dialog-title {padding:14px 20px 16px; font-size:clamp(14px, 2vw, 16px); font-weight:700;}
.compare-dialog-close {position:absolute; top:10px; right:10px; z-index:5; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:none; border-radius:50%; background-color:var(--primary-white); color:var(--primary-black); font-size:18px; cursor:pointer; box-shadow:0 3px 12px rgba(0, 0, 0, 0.35);}
.compare-dialog-close:focus-visible {outline:3px solid var(--primary-green); outline-offset:2px;}

/* === 5. Puntos de la fila en movil: se ven de 10 px y el borde transparente da 44 px de zona de toque === */
.projects-dots {display:none; justify-content:center; gap:0; margin-top:-8px;}
.projects-dot {box-sizing:content-box; width:10px; height:10px; padding:0; border:17px solid transparent; background-clip:content-box; border-radius:999px; background-color:#c4c4c4; cursor:pointer; transition:width 0.25s ease, background-color 0.25s ease;}
.projects-dot[aria-current="true"] {width:26px; background-color:var(--primary-black);}
.projects-dot:focus-visible {outline:3px solid var(--primary-black); outline-offset:-14px;}

/* === 6. Media queries === */
@media (max-width:1023px) {.projects-grid {display:flex; gap:16px; max-width:none; margin:0 -15px; padding:6px 15% 14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none;}
 .projects-grid::-webkit-scrollbar {display:none;}
 .project-card {flex:0 0 70%; scroll-snap-align:center;}
 .projects-dots {display:flex;}
}
@media (max-width:576px) {.projects-grid {margin:0 -10px; padding-inline:8%;}
 .project-card {flex-basis:84%;}
}
@media (prefers-reduced-motion:reduce) {.compare.is-hinting {animation:none;}
 .projects-grid {scroll-behavior:auto;}
}