/* =====================================================================
   MANUFRAN — Estilos de la web pública
   Mobile-first. Se carga después de bootstrap.min.css
   ===================================================================== */

@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jost-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/jost-latin-600-normal.woff2") format("woff2"); }

:root {
    --tinta: #1f1d1b;
    --tinta-2: #2e2b28;
    --texto: #2b2926;
    --suave: #6b6660;
    --gris-logo: #8c8c8c;
    --acento: #a8743f;
    --acento-osc: #8a5d30;
    --acento-10: rgba(168, 116, 63, .10);
    --crema: #f7f3ee;
    --borde: #e8e2d9;
    --blanco: #ffffff;
    --whatsapp: #1fa855;

    --radio: 12px;
    --radio-lg: 20px;
    --sombra: 0 2px 10px rgba(31, 29, 27, .06), 0 1px 3px rgba(31, 29, 27, .05);
    --sombra-hover: 0 14px 34px rgba(31, 29, 27, .14);
    --t: .22s ease;

    --bs-body-font-family: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-color: var(--texto);
    --bs-link-color-rgb: 138, 93, 48;
    --bs-link-hover-color-rgb: 31, 29, 27;
    --bs-border-radius: var(--radio);
}

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { font-family: var(--bs-body-font-family); font-size: 1.05rem; line-height: 1.6; background: var(--blanco); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .h5 { font-weight: 600; letter-spacing: -.01em; color: var(--tinta); }
img { max-width: 100%; height: auto; }
a { text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

.saltar-contenido { position: absolute; left: -999px; top: 0; z-index: 2000; background: var(--tinta); color: #fff; padding: .6rem 1rem; }
.saltar-contenido:focus { left: 1rem; top: 1rem; }

/* ── Botones ─────────────────────────────────────────────────────────── */
.btn { border-radius: 999px; font-weight: 500; padding: .6rem 1.35rem; transition: all var(--t); }
.btn-lg { padding: .8rem 1.6rem; font-size: 1.05rem; }
.btn-primario { background: var(--tinta); color: #fff; border: 1px solid var(--tinta); }
.btn-primario:hover, .btn-primario:focus { background: var(--acento); border-color: var(--acento); color: #fff; }
.btn-secundario { background: transparent; color: var(--tinta); border: 1px solid var(--tinta); }
.btn-secundario:hover { background: var(--tinta); color: #fff; }
.btn-whatsapp { background: var(--whatsapp); color: #fff; border: 1px solid var(--whatsapp); }
.btn-whatsapp:hover { background: #178c46; color: #fff; }
.btn-icono { width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--tinta); border: 1px solid var(--borde); }
.btn-icono:hover { background: var(--crema); }

/* ── Barra superior y cabecera ───────────────────────────────────────── */
.barra-superior { background: var(--tinta); color: #d8d3cc; font-size: .88rem; padding: .45rem 0; }
.barra-superior a, .barra-superior span { color: #d8d3cc; text-decoration: none; }
.barra-superior a:hover { color: #fff; }
.barra-superior i { color: var(--acento); margin-right: .3rem; }
.redes a { font-size: 1.05rem; }

.cabecera { background: rgba(255, 255, 255, .96); backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--borde); z-index: 1030; }
.cabecera .navbar { padding: .55rem 0; }
.cabecera .logo { height: 44px; width: auto; }
.cabecera .nav-link { color: var(--tinta); font-weight: 500; padding: .5rem .9rem !important; border-radius: 999px; }
.cabecera .nav-link:hover, .cabecera .nav-link.active { color: var(--acento-osc); background: var(--acento-10); }
.cabecera .dropdown-menu { border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-hover); padding: .5rem; }
.cabecera .dropdown-item { border-radius: 8px; padding: .45rem .8rem; }
.cabecera .dropdown-item:active { background: var(--tinta); }
@media (min-width: 992px) { .cabecera .logo { height: 56px; } }

.menu-movil { max-width: 320px; }
.menu-movil .nav-link { color: var(--tinta); font-weight: 500; padding: .7rem .5rem; border-bottom: 1px solid var(--borde); }
.menu-movil .nav-link i { width: 1.6rem; display: inline-block; color: var(--acento); }
.menu-movil .nav-link.sub { padding: .45rem .5rem .45rem 2.2rem; font-weight: 400; font-size: .97rem; color: var(--suave); border-bottom: 0; }
.menu-movil .nav-link.active { color: var(--acento-osc); }
.menu-movil .redes a { color: var(--tinta); font-size: 1.3rem; }

.migas { background: var(--crema); border-bottom: 1px solid var(--borde); font-size: .9rem; padding: .6rem 0; }
.migas .breadcrumb { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.migas a { color: var(--suave); text-decoration: none; }
.migas a:hover { color: var(--tinta); }

/* ── Portada (carrusel) ──────────────────────────────────────────────── */
.portada { background: var(--tinta); }
.portada .carousel-item img { width: 100%; height: auto; max-height: 78vh; object-fit: cover; }
.portada .carousel-caption { left: 6%; right: 6%; bottom: 12%; text-align: left; max-width: 640px; }
.portada .carousel-caption::before { content: ""; position: absolute; inset: -1.5rem -2rem; background: rgba(31, 29, 27, .55); border-radius: var(--radio-lg); z-index: -1; filter: blur(2px); }
.portada-titulo { font-size: clamp(1.5rem, 4vw, 3rem); font-weight: 600; margin: 0 0 .25rem; color: #fff; }
.portada-subtitulo { font-size: clamp(1rem, 2vw, 1.25rem); margin-bottom: 1rem; }
.portada .carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; }

.franja-ventajas { background: var(--crema); border-bottom: 1px solid var(--borde); }
.ventajas { list-style: none; margin: 0; padding: 1rem 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem 1rem; }
.ventajas li { display: flex; align-items: center; gap: .7rem; font-size: .95rem; line-height: 1.25; }
.ventajas i { font-size: 1.6rem; color: var(--acento); }
@media (min-width: 992px) { .ventajas { grid-template-columns: repeat(4, 1fr); padding: 1.3rem 0; } }

/* ── Secciones ───────────────────────────────────────────────────────── */
.seccion { padding: 3.5rem 0; }
@media (min-width: 992px) { .seccion { padding: 5rem 0; } }
.seccion-clara { background: var(--crema); }
.seccion-oscura { background: var(--tinta); color: #e9e4dd; }
.seccion-oscura .titulo-seccion, .seccion-oscura .servicio-titulo { color: #fff; }
.encabezado-seccion { text-align: center; max-width: 720px; margin: 0 auto 2.5rem; }
.antetitulo { display: inline-block; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 600; color: var(--acento); margin-bottom: .4rem; text-decoration: none; }
.titulo-seccion { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: .6rem; }
.subtitulo-seccion { color: var(--suave); margin: 0; }
.seccion-oscura .subtitulo-seccion { color: #bdb6ad; }
.titulo-pagina { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: .8rem; }
.cabecera-pagina { max-width: 820px; margin-bottom: 1.5rem; }
.texto-suave { color: var(--suave); }
.texto-largo { color: var(--texto); }
.contenedor-texto { max-width: 860px; }

/* ── Rejillas y tarjetas ─────────────────────────────────────────────── */
.rejilla { display: grid; gap: 1rem; }
.rejilla-familias { grid-template-columns: repeat(2, 1fr); }
.rejilla-productos { grid-template-columns: repeat(2, 1fr); }
.rejilla-trabajos { grid-template-columns: 1fr; }
@media (min-width: 576px) { .rejilla-trabajos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .rejilla { gap: 1.5rem; } .rejilla-familias, .rejilla-productos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .rejilla-familias, .rejilla-productos, .rejilla-trabajos { grid-template-columns: repeat(4, 1fr); } }

.tarjeta-familia { position: relative; display: block; border-radius: var(--radio-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--crema); box-shadow: var(--sombra); text-decoration: none; }
.tarjeta-familia img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.tarjeta-familia::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(20,18,16,.78) 100%); }
.tarjeta-familia-texto { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem; z-index: 1; color: #fff; display: flex; flex-direction: column; }
.tarjeta-familia-nombre { font-weight: 600; font-size: clamp(1rem, 2.2vw, 1.3rem); line-height: 1.2; }
.tarjeta-familia-ver { font-size: .85rem; opacity: .85; margin-top: .2rem; }
.tarjeta-familia:hover img { transform: scale(1.06); }
.tarjeta-familia:hover .tarjeta-familia-ver i { transform: translateX(4px); }
.tarjeta-familia-ver i { display: inline-block; transition: transform var(--t); }

.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-lg); overflow: hidden; transition: box-shadow var(--t), transform var(--t); height: 100%; }
.tarjeta:hover { box-shadow: var(--sombra-hover); transform: translateY(-3px); }
.tarjeta-enlace { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.tarjeta-img { position: relative; aspect-ratio: 1 / 1; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--borde); }
.tarjeta-img img { width: 100%; height: 100%; object-fit: contain; padding: .5rem; }
.tarjeta-trabajo .tarjeta-img { aspect-ratio: 4 / 3; }
.tarjeta-trabajo .tarjeta-img img { object-fit: cover; padding: 0; }
.tarjeta-cuerpo { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.tarjeta-titulo { font-size: 1rem; margin: 0; line-height: 1.3; }
.tarjeta-texto { font-size: .92rem; color: var(--suave); margin: 0; }
.precio { margin: auto 0 0; font-weight: 600; color: var(--acento-osc); }
.precio-consultar { color: var(--suave); font-weight: 500; font-size: .92rem; }
.etiqueta { position: absolute; top: .7rem; left: .7rem; background: rgba(31,29,27,.85); color: #fff; font-size: .78rem; padding: .2rem .6rem; border-radius: 999px; }
@media (min-width: 768px) { .tarjeta-titulo { font-size: 1.08rem; } }

.chips { display: flex; gap: .5rem; overflow-x: auto; padding: .2rem 0 1.2rem; margin-bottom: .5rem; scrollbar-width: thin; }
.chip { flex: 0 0 auto; padding: .45rem 1rem; border: 1px solid var(--borde); border-radius: 999px; color: var(--tinta); text-decoration: none; font-size: .93rem; background: #fff; transition: all var(--t); }
.chip:hover { border-color: var(--tinta); }
.chip.activo { background: var(--tinta); border-color: var(--tinta); color: #fff; }

.vacio { text-align: center; padding: 3rem 1rem; color: var(--suave); }
.vacio i { font-size: 3rem; color: var(--acento); }

/* ── Detalle de producto / trabajo ───────────────────────────────────── */
.galeria-principal { position: relative; display: block; border: 1px solid var(--borde); border-radius: var(--radio-lg); overflow: hidden; background: #fff; }
.galeria-principal img { width: 100%; max-height: 640px; object-fit: contain; display: block; }
.galeria-ampliar { position: absolute; right: .8rem; bottom: .8rem; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; color: var(--tinta); box-shadow: var(--sombra); }
.galeria-miniaturas { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-top: .8rem; }
@media (min-width: 576px) { .galeria-miniaturas { grid-template-columns: repeat(6, 1fr); } }
.galeria-miniaturas a, .galeria-rejilla a { display: block; aspect-ratio: 1 / 1; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde); background: #fff; }
.galeria-miniaturas img, .galeria-rejilla img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t), opacity var(--t); }
.galeria-miniaturas a:hover img, .galeria-rejilla a:hover img { transform: scale(1.05); }
.galeria-miniaturas a.activa { border: 2px solid var(--tinta); }
.galeria-rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
@media (min-width: 768px) { .galeria-rejilla { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }

.ficha-producto { position: sticky; top: 100px; }
.precio-grande { font-size: 1.8rem; font-weight: 600; color: var(--acento-osc); margin-bottom: 1.2rem; }
.precio-grande.precio-consultar { font-size: 1.15rem; color: var(--suave); }

.video-yt { border-radius: var(--radio-lg); overflow: hidden; background: #000; }
.video-yt-btn { border: 0; padding: 0; background: #000; width: 100%; height: 100%; position: relative; cursor: pointer; }
.video-yt-btn img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity var(--t); }
.video-yt-btn:hover img { opacity: 1; }
.video-yt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; background: rgba(31,29,27,.85); color: #fff; font-size: 2.2rem; display: flex; align-items: center; justify-content: center; transition: background var(--t); }
.video-yt-btn:hover .video-yt-play { background: #e62117; }
.video-yt iframe { border: 0; }

/* ── Servicios ───────────────────────────────────────────────────────── */
.servicio { height: 100%; padding: 2rem 1.6rem; border-radius: var(--radio-lg); background: var(--tinta-2); border: 1px solid rgba(255,255,255,.07); text-align: center; }
.servicio-icono { width: 84px; height: 84px; margin: 0 auto 1.2rem; border-radius: 50%; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; }
.servicio-icono img { width: 100%; height: 100%; object-fit: cover; }
.servicio-titulo { font-size: 1.3rem; margin-bottom: .6rem; }
.sombra { box-shadow: var(--sombra-hover); }

/* ── Contacto ────────────────────────────────────────────────────────── */
.seccion-contacto { background: var(--crema); }
.formulario-contacto { background: #fff; padding: 1.5rem; border-radius: var(--radio-lg); border: 1px solid var(--borde); }
@media (min-width: 768px) { .formulario-contacto { padding: 2.2rem; } }
.form-control { border-radius: 10px; padding: .7rem .9rem; border-color: var(--borde); }
.form-control:focus { border-color: var(--acento); box-shadow: 0 0 0 .2rem var(--acento-10); }
.form-check-input:checked { background-color: var(--tinta); border-color: var(--tinta); }
.campo-trampa { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.tarjeta-contacto { background: var(--tinta); color: #e9e4dd; padding: 1.8rem; border-radius: var(--radio-lg); height: 100%; }
.tarjeta-contacto h3 { color: #fff; }
.tarjeta-contacto a { color: #fff; }
.tarjeta-contacto .btn-secundario { color: #fff; border-color: rgba(255,255,255,.5); }
.tarjeta-contacto .btn-secundario:hover { background: #fff; color: var(--tinta); }
.datos-contacto li { display: flex; gap: .8rem; margin-bottom: .8rem; }
.datos-contacto i { color: var(--acento); font-size: 1.15rem; }
.mapa { border-radius: var(--radio); overflow: hidden; background: #3a3632; margin-top: 1rem; }
.mapa-btn { border: 0; width: 100%; height: 100%; color: #fff; background: linear-gradient(135deg, #3a3632, #2a2724); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; cursor: pointer; }
.mapa-btn i { font-size: 2.2rem; color: var(--acento); }
.mapa-btn small { color: #bdb6ad; }
.mapa iframe { border: 0; }

/* ── Pie ─────────────────────────────────────────────────────────────── */
.pie { background: #161412; color: #bdb6ad; padding: 3.5rem 0 1.5rem; font-size: .95rem; }
.pie .logo-pie { height: 52px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.pie-titulo { font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; color: #fff; margin-bottom: 1rem; }
.pie-lista li { margin-bottom: .4rem; }
.pie a { color: #bdb6ad; text-decoration: none; }
.pie a:hover { color: #fff; }
.pie address { font-style: normal; line-height: 1.8; }
.pie-inferior { margin-top: 2.5rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; font-size: .88rem; }

/* ── Flotantes ───────────────────────────────────────────────────────── */
.flotante-whatsapp { position: fixed; right: 1rem; bottom: 1rem; width: 56px; height: 56px; border-radius: 50%; background: var(--whatsapp); color: #fff; font-size: 1.8rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.25); z-index: 1040; transition: transform var(--t); }
.flotante-whatsapp:hover { color: #fff; transform: scale(1.08); }
.volver-arriba { position: fixed; right: 1.15rem; bottom: 5.2rem; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--tinta); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--t); z-index: 1040; }
.volver-arriba.visible { opacity: .9; pointer-events: auto; }

/* ── Textos legales / 404 / mantenimiento ────────────────────────────── */
.texto-legal h2 { font-size: 1.35rem; margin-top: 2rem; }
.texto-legal ul { padding-left: 1.2rem; }
.error-codigo { font-size: 5rem; font-weight: 600; color: var(--acento); line-height: 1; margin: 0; }
.pagina-mantenimiento { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--crema); padding: 2rem; font-family: "Jost", system-ui, sans-serif; }
.pagina-mantenimiento .logo { max-width: 260px; height: auto; margin-bottom: 2rem; }
.pagina-mantenimiento h1 { font-size: 1.8rem; color: var(--tinta); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}