/* ==========================================================
   JC REMODELING — Concepto "Planos"
   Sin formulario, sin WhatsApp, con botón de reseñas de Google
   y ajustes de accesibilidad (WCAG 2.1 AA)
   ========================================================== */

   :root{
    --navy:#072C40;
    --petroleo:#0B4F6C;
    --azul:#4FB8E0;
    --naranja:#F59623;
    --blanco:#FFFFFF;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{font-family:'Inter',sans-serif;color:var(--navy);background:var(--blanco);line-height:1.55;}
  h1,h2,h3,.display{font-family:'Big Shoulders Display',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:0.5px;}
  a{color:inherit;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1160px;margin:0 auto;padding:0 28px;}
  
  /* ---------- Accesibilidad: skip link ---------- */
  .skip-link{
    position:absolute; left:-9999px; top:0; z-index:100;
    background:var(--naranja); color:var(--navy); padding:14px 22px;
    font-weight:800; text-decoration:none; font-family:'Big Shoulders Display';
  }
  .skip-link:focus{ left:12px; top:12px; }
  
  /* ==========================================================
     ANIMACIONES E INTERACTIVIDAD
     Todo lo de aquí se desactiva solo si el visitante tiene activada
     la preferencia de accesibilidad "reducir movimiento" — ver el
     bloque @media (prefers-reduced-motion) al final de esta sección.
     ========================================================== */
  
  /* ---------- Scroll reveal: tarjetas aparecen al hacer scroll ---------- */
  .reveal{
    opacity:0; transform:translateY(28px);
    transition:opacity .6s ease, transform .6s ease;
  }
  .reveal.is-visible{opacity:1; transform:translateY(0);}
  
  /* ---------- Zoom suave en fotos al pasar el mouse ---------- */
  .photo-slot img{transition:transform .45s ease;}
  .service-card:hover .service-thumb img,
  .service-card:focus-within .service-thumb img{transform:scale(1.08);}
  .g-item:hover img, .g-item:focus-within img{transform:scale(1.1);}
  .ba-item:hover img, .ba-item:focus-within img{transform:scale(1.08);}
  .hero-media-item:hover img{transform:scale(1.06);}
  
  /* Fotos clicables: cursor de "ampliar" */
  .g-item, .ba-item{cursor:zoom-in;}
  .g-item:focus-visible, .ba-item:focus-visible{outline:3px solid var(--naranja); outline-offset:-3px;}
  
  /* ---------- Botones con más presencia al interactuar ---------- */
  .btn-primary, .btn-ghost, .btn-call, .nav-cta, .whatsapp-btn{
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .btn-primary:hover, .nav-cta:hover{transform:translateY(-3px); box-shadow:0 12px 24px -10px rgba(245,150,35,.55);}
  .btn-ghost:hover, .btn-call:hover{transform:translateY(-3px); box-shadow:0 12px 24px -10px rgba(79,184,224,.35);}
  .service-quote{transition:gap .2s ease;}
  .service-card:hover .service-quote{padding-left:4px;}
  
  /* ---------- Lightbox: ver foto en grande (versión más discreta) ---------- */
  .lightbox{
    position:fixed; inset:0; z-index:200;
    background:rgba(4,20,29,.7);
    display:flex; align-items:center; justify-content:center;
    padding:40px 24px;
    opacity:0; transition:opacity .25s ease;
  }
  .lightbox[hidden]{display:none;}
  .lightbox.is-open{opacity:1;}
  .lightbox-content{
    max-width:min(80vw, 640px); max-height:70vh;
    transform:scale(.9); transition:transform .25s ease;
  }
  .lightbox.is-open .lightbox-content{transform:scale(1);}
  .lightbox-content img{
    max-width:100%; max-height:58vh; width:auto; height:auto;
    display:block; margin:0 auto; border-radius:4px;
    box-shadow:0 24px 60px -18px rgba(0,0,0,.55);
  }
  .lightbox-content figcaption{
    color:#fff; text-align:center; margin-top:14px;
    font-family:'Big Shoulders Display'; font-size:16px; letter-spacing:.5px;
  }
  .lightbox-close{
    position:absolute; top:20px; right:24px;
    width:40px; height:40px; border-radius:50%;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3);
    color:#fff; font-size:16px; cursor:pointer;
  }
  .lightbox-close:hover{background:rgba(255,255,255,.2);}
  
  /* ---------- Accesibilidad: respetar "reducir movimiento" ----------
     Solo desactivamos las animaciones de ENTRADA (las tarjetas apareciendo
     al hacer scroll), que son las que de verdad pueden resultar molestas.
     El zoom al pasar el mouse lo dejamos activo siempre: es un movimiento
     mínimo, lo inicia el propio usuario, y se detiene en cuanto quita el
     mouse — no es el tipo de movimiento que esta preferencia busca evitar. */
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1; transform:none; transition:none;}
  }
  
  /* ---------- Foco visible en toda la página (no quitar sin reemplazar) ---------- */
  a:focus-visible, button:focus-visible{
    outline:3px solid var(--naranja);
    outline-offset:2px;
  }
  
  /* ============ HERO ============ */
  header.hero{
    background:var(--navy);
    position:relative;
    overflow:hidden;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    border-bottom:6px solid var(--naranja);
  }
  .hero-photo-collage{display:none;} /* ya no se usa: reemplazado por hero-media con fotos reales */
  
  /* ---------- photo-slot: patrón reutilizable con fallback ----------
     Mientras no exista el archivo real en la ruta indicada, se ve un
     color de respaldo (definido por data-fallback) para que el layout
     nunca se vea roto. En cuanto se copie la foto real con el mismo
     nombre de archivo, la imagen la cubre automáticamente — no hay que
     tocar CSS ni HTML. */
  .photo-slot{position:relative;overflow:hidden;background:linear-gradient(150deg,#3a4c56,#1a2c34);}
  .photo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
  .photo-slot[data-fallback="1"]{background:linear-gradient(150deg,var(--petroleo),var(--navy));}
  .photo-slot[data-fallback="2"]{background:linear-gradient(150deg,var(--azul),#2E93BD);}
  .photo-slot[data-fallback="3"]{background:linear-gradient(150deg,var(--naranja),#D97F1B);}
  .photo-slot[data-fallback="4"]{background:linear-gradient(150deg,var(--petroleo),#04141d);}
  .photo-slot[data-fallback="5"]{background:linear-gradient(150deg,var(--azul),var(--navy));}
  .photo-slot[data-fallback="6"]{background:linear-gradient(150deg,var(--naranja),var(--petroleo));}
  .photo-slot[data-fallback="s1"]{background:linear-gradient(150deg,var(--petroleo),var(--navy));}
  .photo-slot[data-fallback="s2"]{background:linear-gradient(150deg,var(--azul),#2E93BD);}
  .photo-slot[data-fallback="s3"]{background:linear-gradient(150deg,#3FA34D,#2C7A3A);}
  .photo-slot[data-fallback="s4"]{background:linear-gradient(150deg,var(--naranja),#D97F1B);}
  .photo-slot[data-fallback="ba1"]{background:linear-gradient(150deg,var(--petroleo),var(--navy));}
  .photo-slot[data-fallback="ba2"]{background:linear-gradient(150deg,#3FA34D,#2C7A3A);}
  .photo-slot[data-fallback="ba3"]{background:linear-gradient(150deg,var(--naranja),#D97F1B);}
  
  /* ---------- Hero: mosaico asimétrico, 2 columnas de tamaño distinto ---------- */
  .hero-media{
    display:grid; grid-template-columns:1.35fr 0.85fr;
    gap:16px; height:100%; min-height:500px;
  }
  .hero-media-col{display:grid;grid-template-rows:1fr 1fr;gap:16px;}
  .hero-media-item{min-height:230px;}
  
  /* Columna izquierda: fotos más grandes con forma de trapecio suave */
  .hero-media-trapezoid{clip-path:polygon(4% 0%, 100% 0%, 96% 100%, 0% 100%);}
  
  /* Columna derecha: fotos más chicas, esquinas orgánicas redondeadas */
  .hero-media-col-right .hero-media-item:nth-child(1){border-radius:10px 46px 10px 10px;}
  .hero-media-col-right .hero-media-item:nth-child(2){border-radius:10px 10px 46px 10px;}
  header.hero::after{
    content:"";
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(7,44,64,.55) 0%, rgba(7,44,64,.88) 70%, var(--navy) 100%);
  }
  .hero-inner{position:relative; z-index:2; display:flex; flex-direction:column; flex:1;}
  
  .navbar{display:flex;align-items:center;justify-content:space-between;padding:30px 0;flex-wrap:wrap;gap:18px;}
  .brand{display:flex;align-items:center;gap:16px;text-decoration:none;}
  .brand img{height:112px;}
  .brand-text{color:var(--blanco);}
  .brand-text .name{display:block;font-family:'Big Shoulders Display';font-size:30px;font-weight:800;letter-spacing:1px;}
  .brand-text .tag{display:block;font-size:14px;color:var(--azul);letter-spacing:1.5px;text-transform:uppercase;}
  
  .nav-contact{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
  .phone-link{
    display:flex;align-items:center;gap:10px;color:var(--blanco);text-decoration:none;
    font-family:'Big Shoulders Display';font-size:25px;font-weight:700;letter-spacing:0.5px;
  }
  .phone-link .ico{width:44px;height:44px;border-radius:50%;background:rgba(79,184,224,.18);border:1px solid var(--azul);display:flex;align-items:center;justify-content:center;color:var(--azul);font-size:19px;}
  .btn-call{background:var(--naranja);color:var(--navy);padding:15px 28px;border-radius:3px;font-weight:800;font-size:18px;text-decoration:none;font-family:'Big Shoulders Display';letter-spacing:1px;}
  
  .hero-content{flex:1;display:flex;align-items:center;padding:36px 0 60px;}
  .hero-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:36px;align-items:center;width:100%;}
  .hero-title{color:var(--blanco);font-size:68px;line-height:1.03;}
  .hero-title span{color:var(--azul);}
  .hero-sub{color:#CFE7F2;max-width:480px;margin-top:18px;font-size:16.5px;font-family:'Inter';font-weight:400;text-transform:none;}
  .hero-actions{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap;}
  .btn-primary{background:var(--naranja);color:var(--navy);padding:15px 26px;font-weight:700;text-decoration:none;border-radius:3px;font-size:15px;}
  .btn-ghost{border:2px solid var(--azul);color:var(--azul);padding:13px 24px;text-decoration:none;font-weight:700;border-radius:3px;font-size:15px;}
  
  /* .hero-project-card ya no se usa — reemplazada por .hero-media (fotos reales) */
  
  /* dimension divider */
  .dim-divider{display:flex;align-items:center;gap:14px;margin:0 0 34px;}
  .dim-divider .line{flex:1;height:1px;background:var(--azul);position:relative;}
  .dim-divider .line::before,.dim-divider .line::after{content:"";position:absolute;top:-5px;width:1px;height:11px;background:var(--azul);}
  .dim-divider .line::before{left:0;} .dim-divider .line::after{right:0;}
  .dim-label{font-family:'Big Shoulders Display';font-weight:700;color:var(--petroleo);font-size:14px;letter-spacing:2px;white-space:nowrap;}
  
  section{padding:76px 0;}
  .section-alt{background:#F4F8FA;}
  
  /* ============ QUIÉNES SOMOS ============ */
  .about-grid{max-width:680px;}
  .about-grid h2{font-size:34px;color:var(--navy);margin-bottom:18px;}
  .about-grid p{max-width:520px;color:#33586B;font-size:16px;}
  .specs{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .spec{border:1px solid #D7E4EA;border-left:4px solid var(--azul);padding:14px 16px;}
  .spec b{display:block;font-family:'Big Shoulders Display';color:var(--navy);font-size:20px;}
  .spec span{font-size:12px;color:#5C7A88;text-transform:uppercase;letter-spacing:1px;}
  /* .blueprint-card eliminada por pedido del cliente (era la tarjeta "FICHA") */
  
  /* ============ SERVICIOS ============
     Accesibilidad: la descripción ya NO depende solo de :hover.
     Se muestra siempre (discreta); el hover solo resalta la tarjeta.
     Así funciona igual con mouse, teclado y lector de pantalla. */
  .services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:10px;}
  .service-thumb{aspect-ratio:2/1;border-radius:3px;margin-bottom:14px;}
  .service-card{
    border:1px solid #D7E4EA;border-top:4px solid var(--azul);
    background:#fff;padding:18px 18px 20px;position:relative;
    transition:border-color .25s ease, box-shadow .25s ease;
  }
  .service-card:hover, .service-card:focus-within{
    border-top-color:var(--naranja); box-shadow:0 14px 30px -18px rgba(7,44,64,.35);
  }
  .service-card b{display:block;font-family:'Big Shoulders Display';font-size:19px;color:var(--navy);letter-spacing:.5px;margin-bottom:8px;}
  .service-desc{
    font-size:13.5px; color:#4A6B79; margin-bottom:14px; line-height:1.55;
  }
  .service-quote{
    display:inline-block; font-family:'Big Shoulders Display';
    font-size:12.5px; letter-spacing:1px; color:var(--naranja); text-decoration:none;
    border-bottom:2px solid transparent;
  }
  .service-card:hover .service-quote, .service-card:focus-within .service-quote{border-bottom-color:var(--naranja);}
  
  /* ============ RESEÑAS ============ */
  .reviews-intro{display:flex;flex-direction:column;gap:26px;}
  .reviews-carousel-wrap{position:relative;}
  .reviews-track{
    display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:6px;
    scrollbar-width:none; -ms-overflow-style:none; /* Firefox / old Edge */
  }
  .reviews-track::-webkit-scrollbar{display:none;} /* Chrome / Safari / new Edge */
  .review-card{
    flex:0 0 300px; scroll-snap-align:start;
    background:var(--blanco);border:1px solid #DCE7EC;border-top:3px solid var(--naranja);padding:22px;
  }
  .stars{color:var(--naranja);letter-spacing:2px;margin-bottom:10px;font-size:15px;}
  .review-card p{color:#33586B;font-size:14.5px;}
  .review-who{margin-top:14px;display:flex;align-items:center;gap:10px;}
  .avatar{width:34px;height:34px;border-radius:50%;background:var(--petroleo);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Big Shoulders Display';font-weight:700;font-size:14px;flex-shrink:0;}
  .review-who .n{font-weight:700;font-size:13.5px;color:var(--navy);}
  .review-who .p{font-size:11.5px;color:#7C93A0;}
  .review-date{font-size:11px;color:#A7B9C2;margin-top:2px;}
  .carousel-arrows{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;}
  .carousel-arrows button{
    width:38px;height:38px;border-radius:50%;border:1.5px solid var(--petroleo);background:#fff;color:var(--petroleo);
    font-size:16px;cursor:pointer;
  }
  .carousel-arrows button:hover{background:var(--petroleo);color:#fff;}
  
  /* ============ GALERÍA ============
     Accesibilidad: la descripción también queda disponible al enfocar
     con teclado (no solo al pasar el mouse). */
  .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px;}
  .g-item{
    aspect-ratio:4/3;background:var(--navy);position:relative;border:1px solid var(--petroleo);overflow:hidden;
  }
  .g-item .base{
    position:absolute;inset:0;display:flex;align-items:flex-end;padding:14px;
    background:repeating-linear-gradient(45deg, var(--petroleo) 0 2px, transparent 2px 14px), var(--navy);
  }
  .g-item .base span{position:relative;z-index:3;color:var(--blanco);font-size:12px;font-family:'Big Shoulders Display';letter-spacing:1px;background:rgba(7,44,64,0.7);padding:4px 8px;}
  .g-item .overlay{
    position:absolute;inset:0;background:rgba(7,44,64,.92);color:#fff;
    display:flex;flex-direction:column;justify-content:center;padding:20px;
    z-index:2;
    opacity:0;transition:opacity .25s ease;
  }
  .g-item:hover .overlay, .g-item:focus-within .overlay{opacity:1;}
  .g-item .overlay b{font-family:'Big Shoulders Display';font-size:15px;color:var(--azul);margin-bottom:8px;display:block;}
  .g-item .overlay p{font-size:12.5px;color:#CFE7F2;}
  .gallery-note{margin-top:16px;font-size:12px;color:#9AA9B0;font-style:italic;}
  
  /* ============ ANTES Y DESPUÉS ============ */
  .section-intro{color:#33586B;font-size:15px;margin:-14px 0 30px;}
  .before-after-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .ba-item{
    position:relative;aspect-ratio:16/10;border-radius:4px;overflow:hidden;
    border:1px solid #DCE7EC;
  }
  .ba-badge{
    position:absolute;top:14px;left:14px;z-index:3;
    background:var(--naranja);color:var(--navy);
    font-family:'Big Shoulders Display';font-size:11.5px;font-weight:800;
    letter-spacing:1px;padding:6px 12px;border-radius:2px;
  }
  /* Las fotos originales traen "BEFORE"/"AFTER" escrito en la esquina
     superior — con object-position empujamos el recorte hacia abajo
     para que esa franja de arriba quede fuera de vista. Si en alguna
     foto todavía se asoma el texto, subir este porcentaje (ej. a 85%). */
  .ba-item img{object-position:center 78%;}
  /* La 3ra foto (Hardscaping de patio) sigue mostrando el texto "BEFORE"
     con el recorte normal, así que a esta le subimos el recorte más
     que a las otras dos. Si aún se asoma, subir el 90% un poco más. */
  /* El recorte con object-position ya llegó casi a su tope y el texto
     "BEFORE" seguía asomando en esta foto — le agregamos zoom (transform:
     scale) para empujarlo fuera de vista. Si aún se ve, subir el 1.35. */
  .ba-item[data-fallback="ba3"] img{
    object-position:center 100%;
    transform:scale(1.35);
    transform-origin:center bottom;
  }
  .ba-item figcaption{
    position:absolute;bottom:0;left:0;right:0;z-index:2;
    background:linear-gradient(0deg, rgba(7,44,64,.92) 0%, transparent 100%);
    color:#fff;font-family:'Big Shoulders Display';font-size:14.5px;letter-spacing:.5px;
    padding:34px 16px 14px;
  }
  
  /* ============ CONTACTO (sin formulario) ============ */
  .contact-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:50px;align-items:start;}
  .contact-main h2{font-size:30px;margin-bottom:10px;}
  .contact-lead{color:#33586B;margin-bottom:24px;}
  .contact-card{border:2px solid var(--navy);background:#fff;}
  .contact-line{
    display:flex;align-items:center;gap:14px;padding:20px 22px;text-decoration:none;color:var(--navy);
    border-bottom:1px solid #DCE7EC;
  }
  .contact-line:last-child{border-bottom:none;}
  .contact-line:hover{background:#F4F8FA;}
  .contact-line .ico{width:42px;height:42px;background:var(--navy);color:var(--azul);display:flex;align-items:center;justify-content:center;font-weight:800;font-family:'Big Shoulders Display';font-size:18px;flex-shrink:0;}
  .contact-line b{display:block;font-size:17px;}
  .contact-line span{font-size:12.5px;color:#7C93A0;}
  
  .coverage{background:#fff;border:1px solid #DCE7EC;padding:24px;}
  .coverage b{display:block;font-family:'Big Shoulders Display';font-size:13px;letter-spacing:1px;color:var(--petroleo);margin-bottom:12px;text-transform:uppercase;}
  .coverage-tags{display:flex;flex-wrap:wrap;gap:8px;}
  .coverage-tags span{border:1px solid var(--azul);color:var(--petroleo);font-size:12.5px;padding:6px 12px;font-family:'Big Shoulders Display';letter-spacing:.5px;}
  .coverage-note{margin-top:14px;font-size:12px;color:#9AA9B0;font-style:italic;}
  
  /* ============ FOOTER ============ */
  footer.site-footer{background:var(--navy);color:#9FC0CF;padding:50px 0 24px;}
  .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;margin-bottom:30px;}
  .footer-grid h4{color:var(--blanco);font-family:'Big Shoulders Display';font-size:15px;letter-spacing:1px;margin-bottom:14px;text-transform:uppercase;}
  .footer-grid ul{list-style:none;display:flex;flex-direction:column;gap:9px;}
  .footer-grid a{color:#9FC0CF;text-decoration:none;font-size:13.5px;}
  .footer-grid a:hover{color:var(--azul);}
  .footer-legal{font-size:13px;color:#9FC0CF;max-width:300px;line-height:1.6;}
  .footer-bottom{border-top:1px solid rgba(159,192,207,.18);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px;}
  .accessibility-note{max-width:420px;opacity:.85;}
  
  /* ============ BOTÓN FLOTANTE (solo llamar) ============ */
  .sticky-cta{
    position:fixed; right:22px; bottom:22px; z-index:50;
    width:58px;height:58px;border-radius:50%;
    background:var(--naranja);color:var(--navy);
    display:flex;align-items:center;justify-content:center;
    text-decoration:none;font-size:22px;box-shadow:0 10px 24px -8px rgba(7,44,64,.5);
    opacity:0; pointer-events:none; transform:translateY(12px);
    transition:opacity .3s ease, transform .3s ease;
  }
  .sticky-cta.visible{opacity:1; pointer-events:auto; transform:translateY(0);}
  
  /* ============ RESPONSIVE ============ */
  @media(max-width:960px){
    .hero-grid{grid-template-columns:1fr;}
    .hero-media{display:none;}
    .services-grid{grid-template-columns:1fr 1fr;}
    .gallery{grid-template-columns:1fr 1fr;}
    .before-after-grid{grid-template-columns:1fr 1fr;}
    .footer-grid{grid-template-columns:1fr;}
    .contact-grid{grid-template-columns:1fr;}
    .hero-title{font-size:42px;}
    .brand img{height:80px;}
    .brand-text .name{font-size:22px;}
  }
  @media(max-width:560px){
    .services-grid, .gallery, .before-after-grid{grid-template-columns:1fr;}
    .specs{grid-template-columns:1fr;}
  }