/* FMSAU style.css - version GALERIA+COVER-A */
/* =====================================================================
   Fabricaciones Militares S.A.U. — Identidad visual
   Adaptación fiel del diseño Google Stitch:
   Inter en todo, azul industrial #003466, hero con Ken Burns,
   tarjetas blancas, autoridades en banda azul, footer negro.
   ===================================================================== */
:root {
  --fm-blue:       #003466;   /* industrial-blue / primary            */
  --fm-blue-dark:  #002649;   /* hover / profundidad                  */
  --fm-black:      #1a1a1a;   /* industrial-black (footer)            */
  --fm-surface:    #f9f9f9;   /* surface                              */
  --fm-surface-2:  #f3f3f3;   /* surface-container-low                */
  --fm-outline:    #dadada;   /* outline-variant                      */
  --fm-text:       #333333;   /* texto base                          */
  --fm-gray:       #464647;   /* text-gray-600                        */
  --fm-gray-400:   #ffffff;   /* text-gray-400                        */
  --fm-radius:     .500rem;   /* rounded-sm                           */
  --fm-radius-full:9999px;
  --fm-maxw:       1280px;    /* container-max                        */
  --motion:        600ms;
  --ease:          cubic-bezier(.4,0,.2,1);
  /* alias de compatibilidad con vistas existentes */
  --fm-accent:     #003466;
  --fm-accent-2:   #002649;
  --fm-ink:        #003466;
  --fm-line:       #dadada;
  --fm-fog:        #9ca3af;
  --fm-paper-2:    #f9f9f9;
}
* { box-sizing:border-box; }
html, body { margin:0 !important; padding:0 !important; }
body {
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--fm-surface); color:var(--fm-text);
  -webkit-font-smoothing:antialiased; line-height:1.6;
}
.container { max-width:var(--fm-maxw); }
h1,h2,h3,h4,h5,h6 { font-family:'Inter',sans-serif; text-transform:none;
  letter-spacing:-0.01em; font-weight:700; line-height:1.2; color:var(--fm-text); }
p { margin-bottom:1rem; }
a { color:var(--fm-blue); text-decoration:none; }
a:hover { color:var(--fm-blue-dark); }

/* ---- Animaciones (Ken Burns + reveal) --------------------------- */
@keyframes ken-burns { from{transform:scale(1);} to{transform:scale(1.15);} }
.ken-burns-img { animation:ken-burns 20s ease-in-out infinite alternate; }
.reveal-item { opacity:0; transform:translateY(30px);
  transition:opacity var(--motion) var(--ease), transform var(--motion) var(--ease); }
.reveal-item.revealed { opacity:1; transform:translateY(0); }
.hover-lift { transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.hover-lift:hover { transform:translateY(-4px); }
@media (prefers-reduced-motion:reduce){
  .ken-burns-img{animation:none!important;}
  .reveal-item{opacity:1!important;transform:none!important;transition:none!important;}
  .hover-lift:hover{transform:none!important;}
}

/* ---- Navbar — ancho completo, logo izq, botones der, banda azul inferior */
.navbar-fm {
  background: #fff;
  border-bottom: none;
  box-shadow: none;
  min-height: 72px;
  padding: 0;
  margin-top: 0 !important;     /* nada de espacio arriba del navbar */
  /* Banda azul oscura en el borde inferior, igual que la captura */
  border-bottom: 1px solid #e0e4e8;
  position: sticky;            /* respaldo por si Bootstrap no carga */
  top: 0;
  z-index: 1030;
}
.navbar-fm .container-fluid {
  min-height: 72px;
  align-items: center;         /* logo y hamburguesa centrados verticalmente */
}

/* Marca — logo izquierda pegado al borde, igual que la captura */
.navbar-fm .navbar-brand {
  display: flex; align-items: center;
  padding: 0;
  margin: 0;                   /* sin margen que descentre al scrollear */
  height: 72px;                /* alto fijo: el logo no se mueve nunca */
}
.navbar-fm .brand-logo {
  height: 36px;            /* alto similar al logo anterior, no agranda el navbar */
  width: auto;
  display: block;
}

/* Botones rectangulares con borde: el patrón exacto de la captura */
.navbar-fm .nav-pill {
  display: inline-block;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: .55rem 1.25rem;
  margin-left: .4rem;
  border: 2px solid var(--fm-blue);
  border-radius: 3px;
  background: #fff;
  color: var(--fm-blue);
  transition: background .18s, color .18s;
  cursor: pointer;
}
.navbar-fm .nav-pill:hover,
.navbar-fm .nav-pill.active {
  background: var(--fm-blue);
  color: #fff !important;
}
/* Dropdown mantiene el mismo estilo de botón */
.navbar-fm .nav-pill.dropdown-toggle::after {
  display: none;   /* en escritorio: sin flechita (queda limpio) */
}
.navbar-fm .dropdown-menu {
  background: #fff;
  border: 1px solid #dde1e6;
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  margin-top: .35rem;
  min-width: 13rem;
  padding: .4rem 0;
}
.navbar-fm .dropdown-item {
  color: var(--fm-blue);
  font-size: .9rem;
  padding: .55rem 1.2rem;
  font-weight: 500;
}
.navbar-fm .dropdown-item:hover {
  background: var(--fm-blue);
  color: #fff;
}
.navbar-fm .navbar-toggler {
  border: none;            /* opción 8: sin recuadro */
  padding: .25rem .5rem;
  box-shadow: none;
}
.navbar-fm .navbar-toggler:focus { box-shadow: none; }
.navbar-fm .navbar-toggler i.bi-list {
  font-size: 2rem;         /* icono grande y limpio */
  color: var(--fm-blue);
  line-height: 1;
  display: block;
}

/* ---- Navbar mobile: sin bordes, lista limpia ---- */
@media (max-width: 991px) {
  .navbar-fm .navbar-collapse {
    background: #fff;
    border-top: 1px solid #e0e4e8;
    margin-top: 0;
    padding: .5rem 0;
    /* el menú flota debajo de la barra: no altera el alto del navbar */
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    box-shadow: 0 12px 24px rgba(0,0,0,.08);
    z-index: 1029;
  }
  .navbar-fm .navbar-nav {
    gap: 0 !important;
    width: 100%;
  }
  .navbar-fm .nav-item { width: 100%; }
  .navbar-fm .nav-pill {
    display: block;
    width: 100%;
    border: none;            /* sin contorno */
    background: transparent;
    color: var(--fm-blue) !important;
    text-align: left;
    padding: .9rem 1.25rem;
    margin: 0;
    border-radius: 0;
    border-bottom: 1px solid #eef0f3; /* separadores sutiles entre items */
    letter-spacing: .04em;
    font-size: .85rem;
  }
  .navbar-fm .nav-pill:hover,
  .navbar-fm .nav-pill.active {
    background: #f4f6f9;     /* hover/activo: solo un gris muy suave */
    color: var(--fm-blue) !important;
  }
  .navbar-fm .nav-item:last-child .nav-pill { border-bottom: none; }

  /* Indicador de submenú: flecha a la derecha en los items que despliegan */
  .navbar-fm .nav-item.dropdown > .nav-pill.dropdown-toggle {
    position: relative;
  }
  .navbar-fm .nav-item.dropdown > .nav-pill.dropdown-toggle::after {
    display: inline-block;          /* en móvil SÍ se muestra */
    content: "\F282";               /* chevron-down de Bootstrap Icons */
    font-family: "bootstrap-icons";
    border: none;                   /* anular el triángulo por defecto de BS */
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    transition: transform .2s ease;
    color: var(--fm-blue);
  }
  /* Cuando el submenú está abierto, la flecha gira hacia arriba */
  .navbar-fm .nav-item.dropdown.show > .nav-pill.dropdown-toggle::after {
    transform: translateY(-50%) rotate(180deg);
  }

  /* Dropdowns dentro del menu mobile: indentados como sub-items */
  .navbar-fm .dropdown-menu {
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
    background: #fafbfc;
    border-radius: 0;
  }
  .navbar-fm .dropdown-item {
    padding: .6rem 2rem;     /* indentado para mostrar jerarquía */
    font-size: .85rem;
    color: var(--fm-blue);
    border-bottom: 1px solid #eef0f3;
  }
  .navbar-fm .dropdown-item:hover {
    background: #eef2f6;
    color: var(--fm-blue);
  }
  .navbar-fm .dropdown-item:last-child { border-bottom: none; }
}

/* ---- Hero (alto fijo, imagen Ken Burns, azul de fondo) ---------- */
.fm-hero { position:relative; height:600px; display:flex; align-items:center;
  overflow:hidden; background:var(--fm-blue); }
.fm-hero .hero-art { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.6; background-size:cover; background-position:center; }
.fm-hero .hero-inner { position:relative; z-index:10; width:100%; color:#fff; }
.fm-hero h1 { color:#fff; font-size:clamp(1.8rem,4vw,3rem); font-weight:700;
  line-height:1.1; letter-spacing:-.02em; margin-bottom:1.5rem; max-width:48rem; }
.fm-hero .lead { color:rgba(255,255,255,.9); font-weight:300; font-size:clamp(1.1rem,2vw,1.25rem);
  max-width:42rem; line-height:1.6; }

/* ---- Botones ----------------------------------------------------- */
.btn-fm { background:var(--fm-blue); border:1px solid var(--fm-blue); color:#fff;
  font-weight:600; font-size:.95rem; padding:.7rem 1.6rem; border-radius:var(--fm-radius);
  transition:all .3s; }
.btn-fm:hover { background:var(--fm-blue-dark); border-color:var(--fm-blue-dark); color:#fff; }
.btn-outline-fm { background:transparent; border:1px solid var(--fm-blue); color:var(--fm-blue);
  font-weight:600; font-size:.95rem; padding:.7rem 1.6rem; border-radius:var(--fm-radius); transition:all .3s; }
.btn-outline-fm:hover { background:var(--fm-blue); color:#fff; }
.btn-pill { display:inline-flex; align-items:center; gap:.5rem; background:#fff; color:var(--fm-blue);
  font-weight:700; padding:.75rem 2rem; border-radius:var(--fm-radius-full); transition:all .3s; }
.btn-pill:hover { background:#f3f4f6; color:var(--fm-blue); transform:scale(1.05); }

/* ---- Secciones --------------------------------------------------- */
.section { padding:5rem 0; }
.section-white { background:#fff; }
.section-surface { background:var(--fm-surface); }
.section-blue { background:var(--fm-blue); color:#fff; }
.section-blue h1,.section-blue h2,.section-blue h3 { color:#fff; }
.section-title { font-size:clamp(1.75rem,3vw,2.25rem); font-weight:700; }
.eyebrow { display:none; } /* Stitch no usa eyebrows */

/* ---- Intro + métricas ------------------------------------------- */
.intro-statement { font-size:clamp(1.5rem,3vw,2.25rem); font-weight:600;
  color:var(--fm-blue); line-height:1.25; letter-spacing:-.01em; text-transform:none; }
.metrics-col { border-top:1px solid #e5e7eb; padding-top:2rem; }
.metric-num { font-size:3rem; font-weight:700; color:var(--fm-blue); line-height:1; }
.metric-label { color:var(--fm-blue); font-weight:500; }
.metric-rule {
  border: 0;
  border-top: 1px solid #c0c8d0;  /* línea gris como en la referencia */
  margin: .8rem 0 1rem;
  opacity: 1;
}
.metric-desc { color:var(--fm-gray); font-size:.875rem; margin:0; }
@media (min-width:768px){
  .metrics-col { border-top:0; border-left:1px solid #e5e7eb; padding-top:0; padding-left:3rem; }
}

/* ---- Fábricas (tarjetas blancas imagen+texto) ------------------- */
.fab-card { background:#fff; padding:1.5rem; border-radius:var(--fm-radius);
  box-shadow:0 1px 3px rgba(0,0,0,.08); border:1px solid #f3f4f6;
  display:flex; gap:2rem; align-items:center; transition:box-shadow .3s var(--ease), transform .3s var(--ease); }
.fab-card:hover { box-shadow:0 20px 40px rgba(0,0,0,.12); transform:translateY(-4px); }
.fab-media { width:33.333%; height:16rem; flex-shrink:0; }
.fab-media span { display:block; width:100%; height:100%; border-radius:var(--fm-radius);
  background:#e5e7eb center/cover; }
.fab-media span.ph { display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#0a3a66,#002649); color:rgba(255,255,255,.5); font-weight:600; letter-spacing:.1em; }
.fab-body h3 { font-size:1.5rem; font-weight:700; color:var(--fm-blue); margin-bottom:.75rem; }
.fab-loc { color:var(--fm-blue); font-size:.9rem; font-weight:500; margin-bottom:.5rem; }
.fab-loc-link { color:var(--fm-blue); text-decoration:none; transition:color .2s var(--ease); }
.fab-loc-link:hover { color:#0a59b0; text-decoration:underline; }
.fab-desc { color:var(--fm-gray); line-height:1.7; margin:0; }
@media (max-width:767px){ .fab-card{flex-direction:column;align-items:stretch;} .fab-media{width:100%;} }

/* ---- Autoridades (banda azul, filas) ---------------------------- */
.auth-list { max-width:56rem; margin:0 auto; }
.auth-row { display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem 1rem; border-bottom:1px solid rgba(255,255,255,.1); transition:background .3s; }
.auth-row:hover { background:rgba(255,255,255,.05); }
.auth-left { display:flex; align-items:center; gap:2rem; }
.auth-photo { width:4.8rem; height:4.8rem; border-radius:50%; overflow:hidden;
  border:2px solid rgba(255,255,255,.2); background:#9ca3af; flex-shrink:0; }
.auth-photo span { display:block; width:100%; height:100%; background:center/cover; transition:transform .4s var(--ease); }
.auth-photo span.ph { display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.7rem; font-weight:600; }
.auth-row:hover .auth-photo span { transform:scale(1.1); }
.auth-name { font-size:1.25rem; font-weight:500; color:#fff; }
.auth-cargo { color:var(--fm-gray-400); text-transform:uppercase; letter-spacing:.1em; font-size:.875rem; font-weight:600; }
@media (max-width:575px){ .auth-left{gap:1rem;} .auth-name{font-size:1.05rem;} .auth-cargo{font-size:.75rem;} }

/* ---- Visión / Misión -------------------------------------------- */
.mv-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fm-blue);
  padding-bottom: 1rem;
  border-bottom: 1px solid #b8b8b0;   /* línea gris suave, ancho completo */
  margin-bottom: 1.75rem;              /* espacio entre línea y párrafo */
}
.mv-text { color: var(--fm-gray); line-height: 1.7; }

/* ---- CTA inferior ----------------------------------------------- */
.cta-band {
  position: relative;
  padding: 5rem 0;          /* sección angosta como en la referencia */
  overflow: hidden;
  background: #1a1a1a;
}
.cta-band .cta-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background-size: cover; background-position: center;
  /* Ya viene en grises desde el servidor; el filter refuerza */
  filter: grayscale(1) brightness(.55);
}
.cta-band::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,.45);   /* overlay más sutil que antes */
}
.cta-band .container { position:relative; z-index:10; text-align:center; }
.cta-band h2 {
  color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.2rem);   /* tamaño del título de la referencia */
  font-weight: 700;
  margin-bottom: 2rem;
  letter-spacing: -.01em;
}

/* ---- Cards de contenido (noticias) ------------------------------ */
.fm-card { background:#fff; border:1px solid #f3f4f6; border-radius:var(--fm-radius);
  overflow:hidden; height:100%; box-shadow:0 1px 3px rgba(0,0,0,.08);
  transition:box-shadow .3s, transform .3s; }
.fm-card:hover { box-shadow:0 16px 34px rgba(0,0,0,.12); transform:translateY(-4px); }
.fm-card .card-media { aspect-ratio:16/10; background:#e5e7eb center/cover; }
.fm-card .card-media.placeholder-fm { display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#0a3a66,#002649); color:rgba(255,255,255,.5); font-weight:600; letter-spacing:.1em; font-size:.85rem; }
.fm-card .card-body { padding:1.3rem 1.4rem; }
.fm-card h5 { font-size:1.15rem; font-weight:700; color:var(--fm-blue); }

/* ---- Footer (negro industrial) ---------------------------------- */
.fm-footer { background:var(--fm-black); color:#fff; padding:4rem 0 2rem; border-top:1px solid #2d2d2d; }
.fm-footer .brand-mark { width:42px; height:42px; border-radius:50%; border:2.5px solid #fff;
  color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; }
.fm-footer .foot-brand { font-size:1.2rem; font-weight:700; color:#fff; }
.fm-footer h4 { color:var(--fm-gray-400); font-weight:600; text-transform:uppercase;
  font-size:.72rem; letter-spacing:.12em; margin-bottom:1.5rem; }
.fm-footer h5 { color:#fff; font-weight:700; font-size:.95rem; margin-bottom:.5rem; }
.fm-footer a { color:var(--fm-gray-400); transition:color .3s; }
.fm-footer a:hover { color:#fff; }
.fm-footer ul { list-style:none; padding:0; margin:0; }
.fm-footer ul li { margin-bottom:1rem; }
.fm-footer .foot-contacts { border-top:1px solid #2d2d2d; padding:3rem 0; color:var(--fm-gray-400); font-size:.875rem; }
.fm-footer .foot-bottom { border-top:1px solid #2d2d2d; padding-top:2rem; color:#6b7280; font-size:.75rem; }
.fm-footer .social a { display:inline-flex; width:40px; height:40px; margin-right:.5rem;
  align-items:center; justify-content:center; border:1px solid #2d2d2d; border-radius:var(--fm-radius); }
.fm-footer .social a:hover { background:var(--fm-blue); border-color:var(--fm-blue); color:#fff; }

/* ---- Page head (cabeceras internas) ----------------------------- */
.page-head { background:var(--fm-blue); color:#fff; padding:4rem 0 3rem; position:relative; }
.page-head h1 { color:#fff; font-size:clamp(2rem,4vw,3rem); font-weight:700; margin:0; }
.page-head .crumb { color:rgba(255,255,255,.7); font-size:.85rem; margin-bottom:.6rem; }
.page-head .crumb a { color:rgba(255,255,255,.7); }
.page-head .crumb a:hover { color:#fff; }

/* ---- Documentos / transparencia --------------------------------- */
.doc-row { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.2rem;
  border:1px solid var(--fm-outline); border-radius:var(--fm-radius); margin-bottom:.6rem; background:#fff; transition:border-color .2s; }
.doc-row:hover { border-color:var(--fm-blue); }
.doc-row .doc-icon { color:var(--fm-blue); font-size:1.5rem; margin-right:.9rem; }

/* ---- Utilidades -------------------------------------------------- */
.text-accent { color:var(--fm-blue)!important; }
.bg-blue { background:var(--fm-blue)!important; }
.lead-muted { color:var(--fm-gray); font-size:1.1rem; }
.badge-estado { font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; }

/* Hero con foto real completa (imagen nítida, texto sobre zona azul) */
.fm-hero-photo {
  height: 730px;           /* misma altura proporcional que la captura */
  align-items: flex-start;
  background: var(--fm-blue);
}
.fm-hero-photo .hero-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 1; object-fit: cover; background-size: cover;
  background-position: center center; animation: none;
}
/* Overlay: azul sólido en la zona superior-izquierda, transparente abajo-derecha */
.fm-hero-photo::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    145deg,
    rgba(0,36,70,.98) 0%,
    rgba(0,36,70,.97) 30%,
    rgba(0,36,70,.80) 45%,
    rgba(0,36,70,.20) 60%,
    transparent 72%
  );
}
.fm-hero-photo .container {
  position: relative; z-index: 10;
  display: flex; align-items: flex-start;
  padding-top: 4.5rem;
}
/* Texto indentado ~11% dentro del container (coincide con posición en captura) */
.fm-hero-photo .hero-inner {
  padding-top: 0;
  padding-bottom: 0;
  max-width: 42rem;
  padding-left: 11%;
}
.fm-hero-photo h1 {
  font-size: clamp(2.2rem, 3.6vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 16px rgba(0,18,40,.25);
  margin-bottom: 1.4rem;
}
.fm-hero-photo .lead {
  text-shadow: 0 1px 8px rgba(0,18,40,.45);
  color: rgba(255,255,255,.90);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  max-width: 36rem;
  line-height: 1.6;
}
/* ---- Hero mobile: foto completa con texto encima de la zona azul de la foto ---- */
@media (max-width: 991px) {
  .fm-hero-photo {
    height: auto;
    min-height: 600px;
    align-items: stretch;
    display: block;            /* sale del flex column */
    position: relative;
    background: var(--fm-blue); /* fallback si la imagen tarda */
  }

  /* Cancelar el overlay diagonal — la foto ya trae el azul integrado */
  .fm-hero-photo::before {
    background: transparent;
  }

  /* La foto vuelve a ser el fondo absoluto, ocupando TODO el hero */
  .fm-hero-photo .hero-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center top;   /* anclar arriba para que se vea la parte azul */
    filter: none;
  }

  /* El container con el texto se superpone sobre la zona azul superior */
  .fm-hero-photo .container {
    position: relative;
    z-index: 10;
    padding-top: 3rem;
    padding-bottom: 4rem;       /* deja espacio para que se vea la foto debajo */
    background: transparent;     /* sin banda extra */
    display: block;
  }

  .fm-hero-photo .hero-inner {
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    max-width: 100%;
    text-align: center;
  }

  .fm-hero-photo h1 {
    font-size: clamp(1.7rem, 7vw, 2.4rem);
    text-align: center;
    margin-bottom: 1.1rem;
    text-shadow: 0 2px 12px rgba(0,18,40,.5);   /* legibilidad sobre la foto */
  }

  .fm-hero-photo .lead {
    text-align: center;
    max-width: 92%;
    margin: 0 auto;
    font-size: clamp(.95rem, 3.8vw, 1.05rem);
    text-shadow: 0 1px 8px rgba(0,18,40,.6);
  }
}

/* ---- Página Productos (grid 4 columnas, tarjetas compactas) ---- */
.prod-cat-title {
  color: var(--fm-blue);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 700;
  letter-spacing: .01em;
  margin-bottom: .4rem;
}
.prod-cat-desc {
    color: var(--fm-muted, #6b7280);
  font-size: .85rem;
  line-height: 1.45;
  margin: 0;
  margin-top: .35rem;            /* separa la descripción del nombre */
  padding-top: .45rem;           /* aire extra + opcional línea divisoria */
  border-top: 1px solid #f0f1f3; /* sutil separador (quitalo si no lo querés) */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 4 productos por fila */
  gap: 1.5rem;
}
.prod-card {
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: var(--fm-radius);
  padding: 0;                 /* sin padding: la imagen llega al borde */
  overflow: hidden;           /* recorta la imagen con los bordes redondeados */
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
  display: flex;
  flex-direction: column;
  text-decoration: none;      /* la card ahora es un enlace */
  color: inherit;
}
.prod-card:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  transform: translateY(-3px);
}
.prod-card:hover .prod-more {
  gap: .55rem;                /* la flecha se separa un poco al pasar el mouse */
}
.prod-media {
  aspect-ratio: 4 / 3;        /* misma proporción que las noticias */
  height: 210px;              /* alto fijo: garantiza el recuadro uniforme */
  background: #f4f4f4;        /* fondo gris claro si la foto no llena */
  display: block;
  overflow: hidden;
  margin: 0;                  /* sin margen, ocupa todo el ancho */
}
.prod-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* la imagen cubre todo el recuadro (recorta si hace falta) */
  object-position: center;    /* centra el recorte */
  display: block;
}
.prod-media .ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: #c5cdd5;
  letter-spacing: .1em;
  font-size: 1.5rem;
  background: linear-gradient(135deg, #f4f4f4, #e5e7eb);
}
.prod-body {
  padding: 1rem 1.1rem 1.2rem;   /* padding del bloque de texto */
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;                       /* empuja para igualar alturas entre cards */
}
.prod-name {
  color: var(--fm-text);
  font-size: .95rem;
  font-weight: 600;
  text-align: left;
  margin: 0;
  line-height: 1.35;
}
.prod-desc {
  color: var(--fm-muted, #6b7280);
  font-size: .85rem;
  line-height: 1.45;
  margin: .35rem 0 0;            /* separa la descripción del nombre */
  display: -webkit-box;          /* recorta a 3 líneas con puntos suspensivos */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prod-more {
  margin-top: auto;              /* queda pegado abajo, alinea entre cards */
  padding-top: .75rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--fm-blue, #003466);
  transition: gap .2s var(--ease);
}

/* Responsive */
@media (max-width: 991px) {
  .prod-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (max-width: 380px) {
  .prod-grid { grid-template-columns: 1fr; }
}

/* ---- Carrusel de galería en el detalle de noticias ---------------- */
.noticia-carrusel .carousel-control-prev,
.noticia-carrusel .carousel-control-next {
  width: 8%;
}
.noticia-carrusel .carousel-control-prev-icon,
.noticia-carrusel .carousel-control-next-icon {
  background-color: rgba(255, 255, 255, .9);  /* círculo blanco para que se distinga */
  border-radius: 50%;
  padding: 1.2rem;
  background-size: 45%;
}
/* Flechas en color oscuro para que contrasten sobre el círculo blanco */
.noticia-carrusel .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23003466' viewBox='0 0 16 16'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
.noticia-carrusel .carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23003466' viewBox='0 0 16 16'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.carrusel-miniaturas {
  margin-top: .25rem;
}
.carrusel-mini {
  border: 2px solid transparent;
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: none;
  line-height: 0;
  transition: border-color .2s var(--ease), opacity .2s var(--ease);
  opacity: .6;
}
.carrusel-mini img {
  width: 72px;
  height: 54px;
  object-fit: cover;
  display: block;
}
.carrusel-mini:hover { opacity: 1; }
.carrusel-mini.activa {
  border-color: var(--fm-blue, #003466);
  opacity: 1;
}

/* ===== Popup de inicio ===== */
.fm-popup-overlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,20,45,.6); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:1rem;
  animation:fmPopupFade .25s ease;
  overflow-y:auto;                  /* si el popup es alto, se puede scrollear */
  -webkit-overflow-scrolling:touch;
}
@keyframes fmPopupFade{ from{opacity:0} to{opacity:1} }
.fm-popup{
  position:relative; background:#fff; border-radius:14px; overflow:hidden;
  max-width:460px; width:100%; box-shadow:0 24px 60px rgba(0,0,0,.3);
  max-height:calc(100vh - 2rem);    /* nunca más alto que la pantalla */
  display:flex; flex-direction:column;
  margin:auto;                      /* centrado, pero permite scroll si no entra */
  animation:fmPopupUp .3s ease;
}
@keyframes fmPopupUp{ from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
.fm-popup-close{
  position:absolute; top:8px; right:12px; z-index:3;
  background:rgba(255,255,255,.95); border:none; border-radius:50%;
  width:36px; height:36px; font-size:1.6rem; line-height:1; color:#003466;
  cursor:pointer; transition:background .2s; box-shadow:0 2px 6px rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center;
}
.fm-popup-close:hover{ background:#fff; }
.fm-popup-body{ display:flex; flex-direction:column; text-decoration:none; color:inherit; overflow-y:auto; }
a.fm-popup-body{ cursor:pointer; }
.fm-popup-img{ flex-shrink:0; }
.fm-popup-img img{ width:100%; height:auto; display:block; max-height:260px; object-fit:cover; }
.fm-popup-text{ padding:1.5rem 1.6rem; }
.fm-popup-text h3{ color:#003466; font-size:1.3rem; font-weight:700; margin:0 0 .5rem; }
.fm-popup-text p{ color:#444; font-size:.97rem; line-height:1.55; margin:0; }
.fm-popup-link{
  display:inline-block; margin-top:1rem; color:#003466; font-weight:600; font-size:.95rem;
}
a.fm-popup-body:hover .fm-popup-link{ text-decoration:underline; }
@media (max-width:480px){
  .fm-popup-overlay{ padding:.75rem; align-items:flex-start; }  /* arranca arriba en móvil */
  .fm-popup{ max-height:calc(100vh - 1.5rem); }
  .fm-popup-img img{ max-height:200px; }
  .fm-popup-text{ padding:1.2rem; }
  .fm-popup-text h3{ font-size:1.15rem; }
}

/* ===== Tabla de Concursos: responsive (tarjetas en móvil) ===== */
.tabla-concursos-wrap{ width:100%; }
.tabla-concursos .conc-titulo{ font-weight:600; color:#1a1a1a; }

@media (max-width:768px){
  /* Ocultar el encabezado de la tabla */
  .tabla-concursos thead{ display:none; }
  .tabla-concursos, .tabla-concursos tbody, .tabla-concursos tr, .tabla-concursos td{
    display:block; width:100%;
  }
  /* Cada fila es una tarjeta */
  .tabla-concursos tr{
    background:#fff; border:1px solid #e6e9ec; border-radius:12px;
    padding:.5rem .25rem; margin-bottom:1rem; box-shadow:0 2px 8px rgba(0,0,0,.04);
  }
  /* Cada celda: etiqueta a la izquierda, valor a la derecha */
  .tabla-concursos td{
    border:none; padding:.55rem 1rem;
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:1rem; text-align:right;
  }
  .tabla-concursos td::before{
    content:attr(data-label);
    font-weight:600; color:#003466; text-align:left; flex-shrink:0;
  }
  /* El título ocupa el ancho completo, sin etiqueta al costado */
  .tabla-concursos td[data-label="Título"]{
    flex-direction:column; text-align:left; border-bottom:1px solid #f0f2f4; padding-bottom:.8rem;
  }
  .tabla-concursos td[data-label="Título"]::before{ margin-bottom:.25rem; }
  /* El botón de descarga ocupa todo el ancho de la tarjeta */
  .tabla-concursos td[data-label="Pliego"]{
    border-top:1px solid #f0f2f4; padding-top:.8rem; margin-top:.2rem;
  }
  .tabla-concursos td[data-label="Pliego"] .btn{ width:100%; padding:.6rem; font-size:.95rem; }
}

/* Descripción del concurso: ancho controlado y texto completo */
.tabla-concursos td[data-label="Título"]{ max-width:420px; }
.tabla-concursos .conc-desc{ margin-top:.25rem; line-height:1.4; white-space:normal; }
@media (max-width:768px){
  .tabla-concursos td[data-label="Título"]{ max-width:none; }
}

/* Concursos: alinear el contenido de las celdas arriba (en escritorio) */
@media (min-width:769px){
  .tabla-concursos td{ vertical-align:top; padding-top:1rem; }
}