/* Proyectos Barrera y Cuevas — estilo Weblium "Cottage Building" · Tipografía: Manrope (grotesca geométrica contemporánea) */
   Paleta: #23262D (Zeus) · #393C42 (Charade) · #FFFFFF · #BABABA · acento rgb(95,132,161) */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --zeus:#23262D;        /* fondo principal */
  --charade:#393C42;     /* superficies */
  --blanco:#FFFFFF;
  --gris:#BABABA;        /* texto secundario */
  --acento:rgb(95,132,161);          /* reemplaza al lima #CEE002 */
  --acento-suave:rgba(95,132,161,.14);
  --borde:#3E434D;
}
body {
  background:radial-gradient(ellipse at 50% 30%, #2B2F38 0%, var(--zeus) 65%);
  color:var(--blanco);
  font-family:'Manrope', Arial, Helvetica, sans-serif;
  min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden;
}

/* ===== Navbar tipo plantilla ===== */
header.navbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 4vw; gap:20px; flex-wrap:wrap;
  background:var(--zeus); border-bottom:1px solid var(--borde);
}
.marca { display:flex; align-items:center; gap:12px; text-decoration:none; }
.marca-logo {
  height:56px; width:auto; display:block;
}
.marca-texto { display:flex; flex-direction:column; line-height:1.1; }
.marca-nombre { font-size:1.25rem; font-weight:800; color:var(--blanco); letter-spacing:.5px; text-transform:uppercase; }
.marca-nombre em { font-style:normal; color:var(--blanco); }
.marca-tag { font-size:.62rem; letter-spacing:3.5px; color:var(--gris); text-transform:uppercase; margin-top:3px; }

nav.enlaces { display:flex; gap:30px; flex-wrap:wrap; }
nav.enlaces a {
  color:var(--acento); text-decoration:none; font-size:.78rem;
  letter-spacing:2.5px; text-transform:uppercase; font-weight:600;
  padding:6px 0; border-bottom:2px solid transparent; transition:.2s;
}
nav.enlaces a:hover { color:var(--blanco); }
nav.enlaces a.activo { color:var(--acento); border-bottom-color:var(--acento); }

.navbar-tel { font-size:.8rem; letter-spacing:1px; color:var(--gris); }
.navbar-tel strong { color:var(--acento); font-weight:700; }

/* ===== Título de página ===== */
.titulo-pagina { text-align:center; padding:22px 16px 42px; }
.titulo-pagina h1 { font-size:clamp(1.87rem,4.25vw,3.06rem); font-weight:800; letter-spacing:1px; text-transform:uppercase; }
.titulo-pagina h1 em { font-style:normal; color:var(--acento); }
.titulo-pagina p { color:var(--gris); font-size:.85rem; letter-spacing:3px; text-transform:uppercase; margin-top:8px; }

/* ===== Escenario 3D ===== */
.escenario {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:6px 10px 10px; user-select:none;
}
/* La zona del globo ocupa todo el espacio libre (entre el título y los botones)
   y centra la esfera verticalmente: su centro queda a mitad de ese espacio */
.anillo-perspectiva { perspective:2400px; width:100%; flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; }
.anillo { position:relative; width:61.2px; height:61.2px; transform-style:preserve-3d; }
.tarjeta {
  position:absolute; inset:0; cursor:pointer;
}
.tarjeta img {
  width:100%; height:100%; object-fit:cover; display:block;
  border:1px solid var(--charade); border-radius:2px;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  pointer-events:none; box-shadow:0 4px 10px rgba(0,0,0,.45);
}
.tarjeta:hover img { border-color:var(--acento); }

.suelo {
  width:min(372px, 85%); height:42px; margin-top:24px;
  background:radial-gradient(ellipse at center, var(--acento-suave), transparent 70%);
}
.controles { display:flex; gap:10px; margin-top:auto; margin-bottom:10px; align-items:center; flex-wrap:wrap; justify-content:center; }
.controles button {
  background:var(--charade); color:var(--blanco); border:1px solid var(--borde);
  padding:4.5px 9px; cursor:pointer; font-size:.43rem; border-radius:2px;
  letter-spacing:.5px; text-transform:uppercase; font-weight:600; transition:.2s;
}
.controles button:hover { background:#454A54; border-color:var(--acento); }
#btnPlay, #btnVista, #btnMusica { background:var(--acento); color:var(--zeus); border-color:var(--acento); }
#btnPlay:hover, #btnVista:hover, #btnMusica:hover { background:#7498B4; }
#contador { color:var(--gris); font-size:.85rem; min-width:52px; text-align:center; letter-spacing:1px; }
.pista { color:#7C828E; font-size:.8rem; margin-top:10px; margin-bottom:8px; }

/* ===== Cuadrícula ===== */
.cuadricula {
  display:none; flex-wrap:wrap; gap:14px; justify-content:center;
  max-width:1000px; padding:24px 16px;
}
.cuadricula img {
  width:220px; height:165px; object-fit:cover; border:1px solid var(--charade);
  transition:.25s; cursor:pointer; border-radius:2px;
}
.cuadricula img:hover { transform:scale(1.05); border-color:var(--acento); }
body.modo-cuadricula .escenario-3d { display:none; }
body.modo-cuadricula .cuadricula { display:flex; }

/* ===== Formulario de contacto ===== */
.formulario { max-width:560px; margin:30px auto; padding:0 16px; flex:1; width:100%; }
.formulario h2 { font-size:1.4rem; }
.formulario label { display:block; margin:18px 0 6px; font-size:.78rem; color:var(--gris); letter-spacing:2px; text-transform:uppercase; }
.formulario input, .formulario textarea {
  width:100%; background:#1D2026; border:1px solid var(--charade); color:var(--blanco);
  padding:11px 12px; font-size:1rem; font-family:inherit; border-radius:2px;
}
.formulario input:focus, .formulario textarea:focus { border-color:var(--acento); outline:none; box-shadow:0 0 0 3px var(--acento-suave); }
.formulario button {
  margin-top:18px; background:var(--acento); color:var(--zeus); border:none;
  padding:8px 15px; font-size:.6rem; cursor:pointer; border-radius:2px;
  letter-spacing:1.5px; text-transform:uppercase; font-weight:700; transition:.2s;
}
.formulario button:hover { background:#7498B4; }
.exito { color:#9CC49A; margin-top:16px; text-align:center; }
.error { color:#D98C8C; margin-top:16px; text-align:center; }

/* ===== Footer ===== */
footer {
  text-align:center; padding:20px; font-size:.75rem; color:var(--gris);
  letter-spacing:2px; text-transform:uppercase;
  background:var(--zeus); border-top:1px solid var(--borde);
}

@media (max-width:640px) {
  .anillo { width:38.4px; height:38.4px; }
  header.navbar { justify-content:center; text-align:center; }
  .navbar-tel { display:none; }
}

/* ===== Visor de pantalla completa ===== */
#visor {
  display:none; position:fixed; inset:0; z-index:100;
  background:rgba(20,22,27,.97);
  align-items:center; justify-content:center;
}
#visor.abierto { display:flex; }
#visor img {
  max-width:100vw; max-height:100vh; object-fit:contain;
  box-shadow:0 12px 44px rgba(0,0,0,.8);
}
#btnVolver {
  position:absolute; top:18px; left:18px; z-index:101;
  background:var(--charade); color:var(--blanco); border:1px solid var(--borde);
  padding:5px 9px; font-size:.45rem; cursor:pointer; border-radius:2px;
  letter-spacing:.5px;
  zoom:2;   /* 200% del tamaño original */
}
#btnVolver:hover { border-color:var(--acento); }
body.sin-scroll { overflow:hidden; }

/* ===== Arrastre del carrusel ===== */
.escenario-3d { cursor:grab; touch-action:none; }
.escenario-3d.arrastrando { cursor:grabbing; }
.escenario-3d button { cursor:pointer; }

/* ===== Botón volver al carrusel ===== */
.btn-volver-carrusel {
  flex-basis:100%; background:var(--charade); color:var(--blanco); border:1px solid var(--borde);
  padding:5.5px 9px; cursor:pointer; font-size:.43rem; border-radius:2px;
  letter-spacing:1px; text-transform:uppercase; font-weight:600;
  zoom:2;   /* 200% del tamaño original */
}
.btn-volver-carrusel:hover { border-color:var(--acento); color:var(--acento); }

/* ===== Panel de datos de contacto ===== */
/* Proporciones según referencia: ~40% datos / ~60% formulario,
   bloques repartidos en toda la altura y el título sobre el formulario */
.contacto-fila { display:grid; grid-template-columns:1fr 1.5fr; gap:48px; align-items:stretch; max-width:1000px; margin-top:10px; }
.datos-contacto { display:flex; flex-direction:column; justify-content:space-between; gap:24px; }
.columna-formulario { display:flex; flex-direction:column; }
.titulo-contacto { text-align:center; padding:0 0 28px; }
.dato { display:flex; gap:14px; align-items:flex-start; }
.dato-icono {
  font-size:1.1rem; color:var(--acento); border:1px solid var(--charade); border-radius:2px;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; background:#1D2026;
}
.dato h3 { font-size:.75rem; letter-spacing:2.5px; color:var(--gris); font-weight:600; text-transform:uppercase; margin-bottom:5px; }
.dato p { font-size:.95rem; line-height:1.55; color:var(--blanco); }
.dato a { color:var(--acento); text-decoration:none; }
.dato a:hover { color:var(--acento); }

@media (max-width:720px) {
  .contacto-fila { grid-template-columns:1fr; }
  .datos-contacto { justify-content:flex-start; }
}

/* ===== Modal "Mensaje Enviado" ===== */
.modal-envio {
  position:fixed; inset:0; z-index:200;
  background:rgba(20,22,27,.82);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.modal-caja {
  background:var(--charade);
  border:1px solid var(--acento);
  border-radius:4px;
  padding:38px 46px;
  text-align:center;
  max-width:92vw;
  box-shadow:0 12px 44px rgba(0,0,0,.6);
  animation:aparecerModal .3s ease;
}
@keyframes aparecerModal {
  from { opacity:0; transform:translateY(14px) scale(.96); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.modal-caja .modal-check {
  width:52px; height:52px; margin:0 auto 16px;
  border:2px solid var(--acento); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:var(--acento);
}
.modal-caja h2 {
  font-size:1.35rem; font-weight:800; letter-spacing:1px;
  text-transform:uppercase; color:var(--blanco);
}
.modal-caja p { color:var(--gris); font-size:.95rem; margin-top:10px; }
.modal-caja button {
  margin-top:22px; background:var(--acento); color:var(--zeus); border:none;
  padding:9px 26px; font-size:.62rem; cursor:pointer; border-radius:2px;
  letter-spacing:1.5px; text-transform:uppercase; font-weight:700; transition:.2s;
}
.modal-caja button:hover { background:#7498B4; }

/* ===== Confirmación de envío (se muestra en la página de contacto) ===== */
.confirmacion-envio {
  text-align:center;
  padding:40px 20px 24px;
}
.confirmacion-envio .modal-check {
  width:64px; height:64px; margin:0 auto 18px;
  border:2px solid var(--acento); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; color:var(--acento);
}
.confirmacion-envio h2 {
  font-size:2rem; font-weight:800; letter-spacing:1px;
  text-transform:uppercase; color:var(--blanco);
}
.confirmacion-envio p { color:var(--gris); font-size:1.4rem; margin-top:12px; }

/* ===== Página de contacto al 85%: datos y cuadros del formulario ===== */
.datos-contacto { zoom: 0.85; }
.columna-formulario form { zoom: 0.85; }


/* ===== Datos de contacto agrandados al 140% (correo, teléfono, dirección) ===== */
.dato-grande .dato-icono { width:56px; height:56px; font-size:1.54rem; }
.dato-grande h3 { font-size:1.05rem; margin-bottom:7px; }
.dato-grande p { font-size:1.33rem; line-height:1.55; }


/* ===== Textos del formulario de contacto al 125% ===== */
.titulo-contacto p { font-size:1.06rem; }
.formulario label { font-size:0.97rem; }
.formulario button { font-size:0.75rem; padding:10px 19px; }