/* =========================================================
   HONORMATE - ESTILOS PRINCIPALES
   CSS limpio y unificado
   ========================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, Helvetica, sans-serif; background: #f4f6f8; color: #1f2937; }

/* CABECERA */
header {
    background: #000000;
    color: white;
    height: 110px;
    padding: 0 60px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    width: 150px;
    height: auto;
    display: block;
}
.menu { display:flex; align-items:center; gap:35px; margin-right:20px; }
.menu a { color:#fff; text-decoration:none; font-size:17px; font-weight:600; transition:color .2s ease; }
.menu a:hover { color:#cbd5e1; }

/* PRESENTACIÓN */
.hero { background:#fff; text-align:center; padding:55px 20px 45px; }
.hero h1 { font-size:40px; margin-bottom:12px; color:#0f172a; }
.hero p { font-size:18px; color:#6b7280; }

/* CATÁLOGO */
.catalogo { max-width:1200px; margin:40px auto; padding:0 20px; }
.catalogo h2 { margin-bottom:25px; font-size:28px; color:#0f172a; }
.productos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}
.producto {
    width: 100%;
    max-width: 100%;
}
.producto { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,.08); display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease; }
.producto:hover { transform:translateY(-5px); box-shadow:0 8px 22px rgba(0,0,0,.12); }
.producto-imagen { height:220px; background:#e5e7eb; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.producto-imagen img { width:100%; height:100%; object-fit:contain; }
.producto-contenido { padding:18px; display:flex; flex-direction:column; flex:1; }
.producto h3 { font-size:19px; margin:0 0 12px; line-height:1.25; color:#0f172a; }
.especificaciones { color:#6b7280; line-height:1.7; margin-bottom:15px; }
.precio { font-size:26px; font-weight:bold; margin-top:14px; margin-bottom:8px; color:#0f172a; }
.stock { color:#16a34a; font-weight:bold; margin-bottom:15px; }
.boton { display:block; width:100%; background:#000; color:#fff; text-align:center; padding:12px; border-radius:7px; text-decoration:none; font-weight:bold; margin-top:auto; transition:background .2s ease, transform .2s ease; }
.boton:hover { background:#222; transform:translateY(-1px); }

/* PIE */
footer { margin-top:60px; background:#000; color:#9ca3af; text-align:center; padding:25px; }

/* FICHA */
.ficha { max-width:1200px; margin:50px auto; padding:0 25px; }
.volver { display:inline-block; margin-bottom:30px; color:#0f172a; text-decoration:none; font-weight:600; }
.volver:hover { text-decoration:underline; }
.ficha-grid { display:grid; grid-template-columns:1fr 1fr; gap:50px; background:#fff; border-radius:15px; padding:35px; box-shadow:0 8px 25px rgba(0,0,0,.08); }
.ficha-imagen { display:flex; align-items:center; justify-content:center; min-height:450px; background:#f1f3f6; border-radius:12px; overflow:hidden; }
.ficha-imagen img { max-width:90%; max-height:450px; object-fit:contain; }
.ficha-info { padding:10px 0; }
.ficha-info h1 { font-size:36px; color:#0f172a; margin:0 0 30px; }
.ficha-especificaciones { font-size:17px; line-height:1.5; color:#64748b; }
.ficha-especificaciones p { margin:10px 0; }
.ficha-especificaciones strong { color:#0f172a; }
.ficha-descripcion { margin-top:30px; padding-top:25px; border-top:1px solid #e2e8f0; font-size:16px; line-height:1.5; color:#475569; }
.ficha-precio { margin-top:30px; font-size:34px; font-weight:700; color:#0f172a; }
.ficha-stock { margin-top:10px; color:#00a63c; font-weight:600; }
.ficha-boton { width:100%; margin-top:30px; padding:15px; border:0; border-radius:7px; background:#0f172a; color:#fff; font-size:16px; font-weight:600; cursor:pointer; transition:background .2s ease; }
.ficha-boton:hover { background:#1e293b; }

/* PERIFÉRICOS */
.catalogo > .productos { display:block; }
.categoria-titulo { margin-top:40px; margin-bottom:20px; font-size:28px; color:#111827; }
.catalogo > .productos > .productos { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; margin-bottom:40px; }
.catalogo > .productos > .productos .producto { width:100%; height:auto; align-self:start; }
.catalogo > .productos > .productos .producto-imagen { height:220px; }
.catalogo > .productos > .productos .producto-contenido { min-height:0; }

/* SERVICIOS */
.servicios { max-width:1100px; margin:0 auto; padding:55px 20px 80px; background:#fff; }
.servicios-contenedor { max-width:1200px; margin:auto; }
.servicios-intro { margin-bottom:35px; }
.servicios-intro h2, .servicios h2 { margin:0 0 10px; font-size:30px; color:#111827; }
.servicios-intro p, .servicios-subtitulo { margin:0 0 40px; color:#52657d; font-size:16px; }
.servicios-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.servicio, .servicio-card { background:#fff; border:1px solid #dfe5ec; border-radius:14px; padding:30px; box-shadow:0 8px 20px rgba(15,23,42,.06); transition:transform .2s ease, box-shadow .2s ease; }
.servicio:hover, .servicio-card:hover { transform:translateY(-3px); box-shadow:0 14px 28px rgba(15,23,42,.10); }
.servicio-icono { font-size:30px; margin-bottom:15px; }
.servicio h3, .servicio-card h3 { margin:0 0 15px; font-size:21px; color:#111827; }
.servicio p, .servicio-card p { margin:0 0 12px; line-height:1.6; color:#52657d; font-size:15px; }
.servicio-nota { font-size:14px !important; color:#718096 !important; }
.servicio-extra { margin-top:18px !important; }
.servicio-precio { margin-top:22px; font-size:30px; font-weight:800; color:#111827; }
.servicio-lista p { margin-bottom:12px; }
.servicio-card-ancho { grid-column:1 / -1; }
.otros-servicios { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:10px; }
.otros-servicios div { background:#f4f6f8; border-radius:10px; padding:18px; }
.otros-servicios strong { display:block; margin-bottom:6px; color:#111827; }
.otros-servicios span { color:#52657d; font-size:14px; }
.servicio-consulta { margin-top:20px !important; font-weight:600; }

/* CONTACTO */
.contacto-ficha { margin-top:30px; padding-top:25px; border-top:1px solid #e2e8f0; }
.contacto-ficha h3 { margin:0 0 8px; font-size:20px; color:#0f172a; }
.contacto-ficha p { margin:0 0 20px; color:#64748b; line-height:1.5; }
.contacto-email { display:block; width:100%; padding:14px 20px; border-radius:8px; background:#0f172a; color:#fff; text-align:center; text-decoration:none; font-weight:600; transition:background .2s ease; }
.contacto-email:hover { background:#1e293b; }
.contacto-whatsapp { margin-top:12px; padding:13px 20px; border:1px solid #dbe2e8; border-radius:8px; text-align:center; color:#475569; font-weight:600; }
.contacto-whatsapp span { display:block; margin-top:4px; font-size:13px; font-weight:400; color:#94a3b8; }
.servicio-contacto { display:block; margin-top:20px; padding:12px 16px; border-radius:8px; background:#0f172a; color:#fff; text-align:center; text-decoration:none; font-weight:600; transition:background .2s ease; }
.servicio-contacto:hover { background:#1e293b; }
.servicio-whatsapp { margin-top:10px; padding:11px 16px; border:1px solid #dbe2e8; border-radius:8px; text-align:center; color:#475569; font-weight:600; }
.servicio-whatsapp span { display:block; margin-top:3px; font-size:12px; font-weight:400; color:#94a3b8; }

/* RESPONSIVE */
@media (max-width:900px) {
    .productos, .catalogo > .productos > .productos { grid-template-columns:repeat(2,1fr); }
    .ficha-grid { grid-template-columns:1fr; gap:30px; }
    .ficha-imagen { min-height:300px; }
    .servicios-grid { grid-template-columns:1fr; }
    .servicio-card-ancho { grid-column:auto; }
    .otros-servicios { grid-template-columns:1fr; }
}

@media (max-width:600px) {
    header { height:auto; min-height:90px; padding:15px 20px; gap:15px; }
    .logo img { width:130px; max-width:130px; }
    .menu { gap:15px; margin-right:0; }
    .menu a { font-size:14px; }
    .hero { padding:40px 15px 35px; }
    .hero h1 { font-size:30px; }
    .hero p { font-size:16px; }
    .catalogo { margin-top:25px; padding:0 15px; }
    .productos, .catalogo > .productos > .productos { grid-template-columns:1fr; }
    .producto-imagen { height:220px; }
    .ficha { margin:30px auto; padding:0 15px; }
    .ficha-grid { padding:20px; }
    .ficha-info h1 { font-size:28px; }
    .servicios { padding:40px 15px 60px; }
    .servicio, .servicio-card { padding:24px; }
    .servicio-card h3, .servicio h3 { font-size:19px; }
    .servicio-precio { font-size:27px; }
}
/* ===== TARJETAS DEL CATÁLOGO ===== */

.catalogo-ordenadores .productos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.catalogo-ordenadores .producto {
    width: 100%;
    max-width: 100%;
}
.producto-contenido h3.gama-basic {
    color: #16a34a !important;
}

.producto-contenido h3.gama-profesional {
    color: #2563eb !important;
}

.producto-contenido h3.gama-elite {
    color: #dc2626 !important;
}
.gama-basic {
    color: #16a34a;
}

.gama-professional {
    color: #2563eb;
}

.gama-elite {
    color: #dc2626;
}
/* ===== ORDENADORES - AJUSTE MOVIL ===== */

@media (max-width: 600px) {

    .catalogo-ordenadores .productos {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .catalogo-ordenadores .producto {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box;
    }

    .catalogo-ordenadores .producto-imagen {
        height: 220px !important;
        width: 100% !important;
    }

    .catalogo-ordenadores .producto-imagen img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    .catalogo-ordenadores .producto-contenido {
        padding: 18px !important;
    }

}