/* MundoTarjetas - Estilo MINIMAL
   - Fondo global: /img/background.jpg en b/n tenue
   - Banner superior: /img/fondo_superior.jpg
   - Servicios: /img/servicios/servicio*.jpg
   - Productos: /img/productos/producto*.jpg
*/

/* ===== Variables neutras ===== */
:root{
  --ink:#222;          /* texto */
  --muted:#6b6b6b;     /* texto secundario */
  --paper:#fff;        /* tarjetas */
  --line:#eaeaea;      /* bordes */
  --radius:12px;
  --radius-sm:10px;
}

/* ===== Reset mínimo ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  line-height:1.5;
  background:#fff; /* base blanca para lectura */
}

/* Fondo global con imagen en b/n pálido (pseudo-elemento para filtrar) */
body::before{
  content:"";
  position:fixed; inset:0;
  background: url("/img/background.jpg") center/cover no-repeat;
  filter: grayscale(85%) saturate(70%) brightness(1.05);
  opacity:.18;            /* tenue/pastel */
  z-index:-1; pointer-events:none;
}

/* ===== Contenedor y secciones ===== */
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.section{padding:36px 0;border-top:1px solid var(--line)}
.section:first-of-type{border-top:0}
.section h2{margin:0 0 18px;font-size:22px;text-align:center;font-weight:700;color:var(--ink)}

/* ===== Header y navegación (simple) ===== */
header{
  position:sticky; top:0; z-index:10;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.05) blur(6px);
  border-bottom:1px solid var(--line);
}
nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}
.brand{font-weight:700;letter-spacing:.3px}
.nav-links a{
  display:inline-block;padding:8px 10px;border-radius:999px;color:var(--ink);text-decoration:none;
}
.nav-links a:hover{background:#f7f7f7}

/* ===== Banner superior ===== */
.hero-banner{border-bottom:1px solid var(--line)}
.hero-banner img{
  width:100%;height:260px;object-fit:cover;display:block;
  filter: grayscale(20%) contrast(105%);
}

/* ===== Grids ===== */
.grid{display:grid;gap:14px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width: 960px){ .grid.cols-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 640px){ .grid.cols-3{grid-template-columns:1fr} }

/* ===== Tarjetas ===== */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Por defecto (SERVICIOS) — se mantiene igual */
.card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

/* Solo PRODUCTOS — mostrar imagen completa y efecto al pasar el mouse */
#productos .card.product img {
  width: 100%;
  height: 160px;
  object-fit: contain;      /* imagen entra completa en el marco */
  background: #fff;         /* fondo blanco si sobra espacio */
  transition: transform 0.25s ease;
}

/* Efecto hover solo en productos */
#productos .card.product:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  z-index: 10;
}

/* Contenido de la tarjeta */
.card-content {
  padding: 12px;
}

.card h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* Variante simple (servicios) sin controles extra */
.card.simple img{height:130px}

/* Productos con panel mínimo (sin medida ni color) */
.card.product .panel-min{
  display:grid;
  grid-template-columns:80px auto; /* número + botón */
  gap:8px;
  padding:12px;
  border-top:1px solid var(--line);
}
@media (max-width:720px){
  .card.product .panel-min{
    grid-template-columns:1fr 1fr;
  }
  .card.product .panel-min .btn{
    grid-column:1 / -1;
  }
}

/* ===== Tabla + formulario ===== */
.row{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
@media (max-width:980px){ .row{grid-template-columns:1fr} }
#cotizacionBox{position:sticky;top:78px}

.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left}
.subtle{color:#8a8a8a}

input,select,textarea{
  width:100%;padding:10px;border-radius:var(--radius-sm);
  background:#fff;border:1px solid var(--line);color:var(--ink)
}
input:focus,select:focus,textarea:focus{outline:none;border-color:#d0d0d0}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){ .form-row{grid-template-columns:1fr} }

/* ===== Botones ===== */
.btn{
  display:inline-block;cursor:pointer;
  padding:10px 14px;border-radius:999px;border:1px solid #d0d0d0;background:#111;color:#fff;
  font-size:14px;line-height:1;
}
.btn:hover{filter:brightness(.95)}
.btn.secondary{background:#fff;color:#111}

/* ===== Alertas ===== */
.alert{border-radius:var(--radius);padding:10px 12px;margin:10px 0;font-size:14px}
.alert.ok{background:#f0f7f2;border:1px solid #d8eadf;color:#1f6b3a}
.alert.err{background:#fdeeee;border:1px solid #f5c7c7;color:#9b2c2c}

/* ===== Footer ===== */
footer{padding:18px 0;color:#7a7a7a;text-align:center;border-top:1px solid var(--line);margin-top:24px}

/* ===== Ajustes específicos ===== */
/* Cantidad con números tabulares y centrado */
.card .qty{
  text-align:center; font-variant-numeric: tabular-nums; letter-spacing:1px;
}

/* ===== Lógica de visibilidad ===== */
.hidden{display:none !important;}
.service-active{outline:2px solid #000;}

/* ===== Tarjetas nuevas de servicios ===== */
.card.svcBtn {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card.svcBtn:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.card.svcBtn.active {
  border: 2px solid #111;
}
/* --- Efecto real de agrandar imagen en productos --- */
.card.product {
  overflow: visible; /* permite que la imagen sobresalga */
  position: relative;
  z-index: 1;
}

.card.product img {
  object-fit: contain;
  height: 160px;
  width: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: block;
  background: #fff;
}

/* Zoom real al pasar el mouse */
.card.product:hover img {
  transform: scale(1.25); /* se agranda 25% */
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  z-index: 5;
}

/* === CORRECCIÓN DEFINITIVA: Ocultar Medida y Color (Problema 1) === */

/* 1. Oculta los elementos SELECT que tienen las clases .medida y .color (encontradas en main.js) */
.card.product .medida,
.card.product .color {
  display: none !important;
}

/* 2. Oculta el contenedor padre de esas opciones si se generan en una fila/columna separada */
/* Nota: Se usa el selector ":has()" que requiere navegadores modernos (Chrome 105+, Firefox 121+, Safari 16.5+). */
.card.product .panel-min > div:has(.medida),
.card.product .panel-min > div:has(.color) {
  display: none !important;
}