:root{
  --verde:#1b5e20;
  --verde-claro:#2e7d32;
  --azul:#0288d1;
  --dorado:#ffb300;
  --oscuro:#0f1c12;
  --texto:#333;
  --blanco:#fff;
  --gris:#f5f7f5;
  --sombra:0 12px 30px rgba(15,28,18,.15);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,Arial,sans-serif;color:var(--texto);background:#fff;line-height:1.6;overflow-x:hidden}

header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);box-shadow:0 2px 14px rgba(0,0,0,.08)}
.nav{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 20px;gap:16px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none}
.logo img{height:46px;width:auto}
.menu{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.menu a{text-decoration:none;color:var(--verde);font-weight:600;padding:8px 14px;border-radius:50px;transition:.2s}
.menu a:hover{background:var(--gris);color:var(--azul)}
.menu .activo{background:var(--verde);color:#fff}
.contacto-btn{background:var(--dorado);color:#4a3000!important;border-radius:50px;font-weight:800}
.menu-toggle{display:none;background:none;border:0;font-size:26px;cursor:pointer;color:var(--verde)}

main{max-width:1180px;margin:0 auto;padding:30px 20px 60px}

.hero{text-align:center;padding:50px 10px 40px}
.hero h1{font-size:clamp(28px,5vw,48px);color:var(--verde);line-height:1.15;margin-bottom:14px}
.hero h1 span{color:var(--dorado)}
.hero p{font-size:clamp(15px,2.4vw,19px);max-width:640px;margin:0 auto 26px;color:#4a5560}

/* hero escena 3D giratoria */
.scene{perspective:1200px;margin:34px auto;width:100%;max-width:760px}
.cubo{position:relative;transform-style:preserve-3d;animation:girar 26s linear infinite;width:220px;height:220px;margin:0 auto}
.cubo .cara{position:absolute;width:220px;height:220px;border:2px solid var(--verde-claro);background:linear-gradient(145deg,rgba(46,125,50,.25),rgba(2,136,209,.18));display:flex;align-items:center;justify-content:center;border-radius:8px;overflow:hidden}
.cubo img{width:100%;height:100%;object-fit:cover}
.cara.f1{transform:translateZ(110px)}
.cara.f2{transform:rotateY(180deg) translateZ(110px)}
.cara.f3{transform:rotateY(90deg) translateZ(110px)}
.cara.f4{transform:rotateY(-90deg) translateZ(110px)}
.cara.f5{transform:rotateX(90deg) translateZ(110px)}
.cara.f6{transform:rotateX(-90deg) translateZ(110px)}
@keyframes girar{0%{transform:rotateX(-18deg) rotateY(0)}100%{transform:rotateX(-18deg) rotateY(360deg)}}

.botones{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;padding:14px 28px;border-radius:50px;font-weight:800;font-size:15px;transition:.22s}
.btn-primario{background:linear-gradient(135deg,var(--dorado),var(--verde-claro));color:#fff}
.btn-primario:hover{transform:translateY(-3px);box-shadow:var(--sombra)}
.btn-secundario{background:var(--verde);color:#fff}
.btn-secundario:hover{transform:translateY(-3px);box-shadow:var(--sombra)}

.seccion{padding:46px 0;border-top:1px solid #e6eee6}
.encabezado{text-align:center;margin-bottom:30px}
.encabezado h2{font-size:clamp(22px,3.6vw,32px);color:var(--verde)}
.encabezado p{color:#5a6660;max-width:600px;margin:8px auto 0}

.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.tarjeta{background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--sombra);text-decoration:none;color:inherit;transition:.25s}
.tarjeta:hover{transform:translateY(-6px)}
.tarjeta .img{height:200px;overflow:hidden}
.tarjeta .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tarjeta:hover .img img{transform:scale(1.08)}
.tarjeta .info{padding:16px}
.tarjeta .info h3{color:var(--verde)}
.tarjeta .info p{font-size:14px;color:#5a6660;margin:6px 0}
.precio{font-weight:800;color:var(--azul)}

/* tilt 3D para tarjetas */
.tilt{transform-style:preserve-3d;perspective:900px}
.tilt .inner{transition:transform .12s;transform-style:preserve-3d}

.ventajas{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:26px}
.ventaja{background:var(--gris);border-radius:16px;padding:22px;border-left:5px solid var(--dorado);box-shadow:var(--sombra)}
.ventaja h3{color:var(--verde);font-size:18px}
.ventaja p{font-size:14px;color:#4a5a50}

/* ubicación */
.ubicacion{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.mapa{min-height:320px;border-radius:16px;overflow:hidden;border:1px solid #e0e0e0;background:#e8f5e9}
.mapa iframe{width:100%;height:100%;border:0;display:block}
.datos-lugar{background:var(--gris);border-radius:16px;padding:24px;box-shadow:var(--sombra)}
.datos-lugar h3{color:var(--verde);margin-bottom:14px}
.fila{display:flex;gap:12px;align-items:flex-start;margin:12px 0}
.fila .ico{font-size:22px}

/* contacto */
.contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.contacto-big{background:linear-gradient(135deg,var(--verde),#0f3d14);color:#fff;border-radius:16px;padding:26px;box-shadow:var(--sombra)}
.contacto-big h3{color:var(--dorado);font-size:22px;margin-bottom:16px}
.tel{font-size:clamp(22px,4vw,30px);font-weight:800;color:var(--dorado);display:block;margin:10px 0;text-decoration:none}
.form label{font-weight:700;color:var(--verde);display:block;margin:12px 0 6px}
.form input,.form textarea,.form select{width:100%;padding:12px 14px;border:2px solid #cfd8cf;border-radius:10px;font-size:15px;font-family:inherit}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--azul)}
.form textarea{resize:vertical;min-height:110px}

.pie{background:var(--oscuro);color:#cfd8cf;padding:40px 20px;text-align:center}
.pie .cols{max-width:1180px;margin:0 auto 22px;display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));text-align:left}
.pie h4{color:var(--dorado);margin-bottom:10px}
.pie a{color:#cfd8cf;text-decoration:none;display:block;margin:6px 0}
.pie a:hover{color:var(--dorado)}
.pie .social{display:flex;gap:12px;margin-top:8px}
.pie .social a{font-size:22px}

/* página producto */
.detalle{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.detalle img{width:100%;border-radius:16px;box-shadow:var(--sombra)}
.detalle h1{color:var(--verde);font-size:30px;margin-bottom:10px}
.detalle .precio-big{font-size:30px;color:var(--dorado);font-weight:800;margin:12px 0}
.back{display:inline-block;margin-bottom:20px;color:var(--azul);text-decoration:none;font-weight:700}
.check-list li{margin:8px 0 8px 18px;color:#3a463e}
.breadcrumb{color:#7a867e;font-size:14px;margin-bottom:16px}
.breadcrumb a{color:var(--azul);text-decoration:none}

.cta-banner{background:linear-gradient(135deg,var(--azul),var(--verde));color:#fff;border-radius:18px;padding:34px;text-align:center;box-shadow:var(--sombra);margin-top:40px}
.cta-banner h3{font-size:26px;margin-bottom:8px}

@media(max-width:820px){
  .ubicacion,.contacto-grid,.detalle{grid-template-columns:1fr}
  .hero{padding:36px 8px 30px}
}
@media(max-width:640px){
  .menu{display:none;width:100%;flex-direction:column;background:#fff;padding:10px;border-radius:12px;box-shadow:var(--sombra)}
  .menu.abierto{display:flex}
  .menu-toggle{display:block}
  .cubo{width:180px;height:180px}
  .cubo .cara{width:180px;height:180px}
  .cara.f1{transform:translateZ(90px)}
  .cara.f2{transform:rotateY(180deg) translateZ(90px)}
  .cara.f3{transform:rotateY(90deg) translateZ(90px)}
  .cara.f4{transform:rotateY(-90deg) translateZ(90px)}
  .cara.f5{transform:rotateX(90deg) translateZ(90px)}
  .cara.f6{transform:rotateX(-90deg) translateZ(90px)}
}