/* FAMAGRI · secciones de cada página: Home, catálogo, ficha, contacto. */

/* ---------- Home: portada con banners ---------- */
.portada { position: relative; background: var(--negro); color: var(--blanco); overflow: hidden; }
.portada__slide { display: none; }
.portada__slide.activa { display: block; animation: aparecer .6s ease; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
.portada__grid { display: grid; align-items: center; gap: 28px; min-height: min(78vh, 640px); padding-block: 40px 72px; }
@media (min-width: 900px) { .portada__grid { grid-template-columns: 1.05fr 1fr; padding-block: 56px 88px; } }
.portada__texto { position: relative; z-index: 2; }
.portada__texto h1 { margin: 0 0 16px; }
.portada__texto h1 em { font-style: normal; color: var(--rojo-vivo); }
.portada__texto p { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: #D2D2D2; max-width: 40ch; margin-bottom: 26px; }
.portada__botones { display: flex; flex-wrap: wrap; gap: 10px; }
.portada__sello { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-weight: 600; font-size: .9rem; }
.portada__sello .banderas { gap: 3px; }
.portada__foto { position: relative; justify-self: center; width: min(100%, 540px); }
.portada__foto::before { content: ""; position: absolute; inset: 8% -40% -20% 12%; background: var(--rojo); transform: skewX(-14deg); z-index: 0; }
.portada__foto::after { content: ""; position: absolute; inset: auto auto -14px -6px; width: 120px; height: 14px; background: repeating-linear-gradient(-45deg, var(--amarillo) 0 12px, transparent 12px 22px); z-index: 2; }
.portada__foto img { position: relative; z-index: 1; width: 100%; aspect-ratio: 1 / .9; object-fit: cover; border-radius: var(--radio-g); box-shadow: 0 30px 60px rgba(0, 0, 0, .45); border: 6px solid var(--blanco); }
.portada__puntos { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; }
.portada__puntos button { width: 34px; height: 6px; border: 0; padding: 0; background: rgba(255, 255, 255, .3); cursor: pointer; transform: skewX(-25deg); }
.portada__puntos button[aria-current="true"] { background: var(--rojo-vivo); }
@media (max-width: 899px) {
  .portada__grid { padding-top: 28px; gap: 22px; min-height: 0; }
  .portada__foto { order: -1; width: min(86%, 420px); margin-right: 10%; }
  .portada__foto::before { inset: 10% -50% -12% 20%; }
}

/* ---------- Home: fábrica (fabricamos / reparamos / capacitamos) ---------- */
.fabrica { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .fabrica { grid-template-columns: 1fr 1fr; gap: 56px; } }
.fabrica__fotos { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }
.fabrica__fotos img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radio-g); aspect-ratio: 3 / 4; }
.fabrica__fotos img:last-child { aspect-ratio: 1; align-self: end; }
.fabrica__marca { position: absolute; left: -10px; bottom: -14px; background: var(--rojo); color: var(--blanco); padding: 14px 18px; border-radius: var(--radio); font: 800 1.15rem/1 var(--f-titulo); text-transform: uppercase; box-shadow: var(--sombra); }
.fabrica__marca small { display: block; font: 600 .78rem/1.3 var(--f-texto); text-transform: none; opacity: .9; }
.pilares { list-style: none; margin: 24px 0 28px; padding: 0; display: grid; gap: 14px; }
.pilares li { display: flex; gap: 14px; align-items: flex-start; }
.pilares i { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radio); background: var(--negro); color: var(--amarillo); font-size: 1.3rem; }
.pilares strong { display: block; font: 800 1.2rem/1.1 var(--f-titulo); text-transform: uppercase; }
.pilares span { color: var(--gris); font-size: .95rem; }

/* ---------- Franja COPEBOL ---------- */
.franja-roja { position: relative; background: var(--rojo); color: var(--blanco); overflow: hidden; }
.franja-roja::before { content: "FAMA"; position: absolute; right: -2%; top: 50%; transform: translateY(-50%); font: 800 clamp(8rem, 22vw, 18rem)/1 var(--f-titulo); color: rgba(0, 0, 0, .1); pointer-events: none; }
.copebol { position: relative; display: grid; gap: 24px; align-items: center; padding-block: clamp(40px, 6vw, 64px); }
@media (min-width: 900px) { .copebol { grid-template-columns: 1.2fr 1fr; } }
.copebol h2 { margin: 0 0 8px; }
.copebol p { margin: 0; font-size: 1.1rem; color: #FFE3E5; max-width: 46ch; }
.copebol__paises { display: flex; gap: clamp(14px, 3vw, 28px); justify-content: center; }
.pais { display: grid; justify-items: center; gap: 10px; font: 800 1.15rem/1 var(--f-titulo); text-transform: uppercase; letter-spacing: .06em; }
.pais .bandera { width: clamp(64px, 10vw, 96px); height: clamp(64px, 10vw, 96px); box-shadow: 0 0 0 4px var(--blanco), 0 12px 24px rgba(0, 0, 0, .25); }

/* ---------- Llamado final ---------- */
.llamado { position: relative; background: var(--negro); color: var(--blanco); overflow: hidden; }
.llamado::before { content: ""; position: absolute; left: -10%; top: 0; bottom: 0; width: 34%; background: var(--rojo); transform: skewX(-18deg); }
.llamado__grid { position: relative; display: grid; gap: 24px; align-items: center; padding-block: clamp(44px, 7vw, 80px); }
@media (min-width: 900px) { .llamado__grid { grid-template-columns: 1fr 1fr; } .llamado__grid > :first-child { padding-left: 4%; } }
.llamado h2 { margin: 0; }
.llamado__acciones { display: grid; gap: 10px; }
@media (min-width: 560px) { .llamado__acciones { grid-template-columns: 1fr 1fr; } }
.llamado__acciones .btn { min-height: 58px; font-size: 1.05rem; }
@media (max-width: 899px) { .llamado::before { width: 18%; left: -12%; } }

/* ---------- Catálogo ---------- */
.filtros { position: sticky; top: var(--alto-cab); z-index: 20; background: var(--blanco); border-bottom: 1px solid var(--linea); }
.filtros__fila { display: flex; align-items: center; gap: 12px; padding-block: 12px; }
.filtros__cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; padding-bottom: 2px; }
.filtros__cats::-webkit-scrollbar { display: none; }
.filtros__cats .chip { white-space: nowrap; font-size: .9rem; padding: 8px 12px; }
.buscador { position: relative; flex: none; width: min(280px, 40vw); }
.buscador input { width: 100%; min-height: 42px; padding: 0 40px 0 14px; border: 1.5px solid #CFCAC2; border-radius: 999px; }
.buscador button { position: absolute; right: 4px; top: 4px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--negro); color: var(--blanco); cursor: pointer; }
@media (max-width: 767px) { .filtros__fila { flex-wrap: wrap; } .buscador { width: 100%; order: -1; } }
.catalogo__barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 18px; }
.catalogo__barra strong { font: 800 1.4rem/1 var(--f-titulo); text-transform: uppercase; }
.catalogo__barra .chips { margin-left: auto; }
.cat-intro { display: flex; align-items: center; gap: 16px; padding: 18px; margin-bottom: 20px; border-radius: var(--radio-g); background: var(--fondo); }
.cat-intro .cultivo__icono { flex: none; }
.cat-intro p { margin: 0; color: var(--gris); }

/* ---------- Ficha de máquina ---------- */
.ficha { display: grid; gap: clamp(20px, 4vw, 48px); padding-block: clamp(20px, 4vw, 40px); }
@media (min-width: 960px) { .ficha { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.galeria__principal { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--linea); border-radius: var(--radio-g); overflow: hidden; background: var(--fondo); aspect-ratio: 1 / .9; cursor: zoom-in; }
.galeria__principal img { width: 100%; height: 100%; object-fit: contain; background: var(--blanco); }
.galeria__principal .etiqueta { position: absolute; top: 14px; left: 14px; z-index: 1; }
.galeria__zoom { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(17, 17, 17, .75); color: var(--blanco); }
.galeria__miniaturas { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.galeria__miniaturas button { flex: none; width: 76px; height: 76px; padding: 0; border: 2px solid var(--linea); border-radius: var(--radio); overflow: hidden; cursor: pointer; background: var(--blanco); }
.galeria__miniaturas button[aria-current="true"] { border-color: var(--rojo); }
.galeria__miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.ficha__info { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 960px) { .ficha__info { position: sticky; top: calc(var(--alto-cab) + 20px); } }
.ficha__cat { font-weight: 700; color: var(--rojo); letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; }
.ficha__info h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); margin: 0; }
.ficha__resumen { font-size: 1.15rem; color: #383838; margin: 0; }
.ficha__datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--linea); border-radius: var(--radio-g); overflow: hidden; }
.dato { background: var(--blanco); padding: 12px 14px; box-shadow: 1px 0 0 var(--linea), 0 1px 0 var(--linea); }
.dato span { display: block; font-size: .78rem; color: var(--gris); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.dato strong { font-size: 1rem; }
.dato i { color: var(--rojo); margin-right: 4px; }
.stock { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .92rem; }
.stock::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgba(30, 158, 74, .18); }
.stock--pedido::before { background: var(--amarillo); box-shadow: 0 0 0 4px rgba(255, 194, 14, .25); }
.stock--agotado::before { background: var(--gris-claro); box-shadow: none; }
.ficha__precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.ficha__precio strong { font: 800 2.4rem/1 var(--f-titulo); }
.ficha__precio s { color: var(--gris-claro); font-size: 1.1rem; }
.ficha__precio .consultar { font: 800 1.6rem/1 var(--f-titulo); text-transform: uppercase; color: var(--acero); }
.ficha__acciones { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.ficha__acciones .btn--wa { grid-column: 1 / -1; min-height: 58px; font-size: 1.1rem; }
.compartir { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .9rem; color: var(--gris); }
.compartir a, .compartir button { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--linea); background: var(--blanco); color: var(--acero); font-size: 1.05rem; cursor: pointer; }
.compartir a:hover, .compartir button:hover { background: var(--negro); color: var(--blanco); border-color: var(--negro); }
.compartir .copiado { background: var(--verde); color: var(--blanco); border-color: var(--verde); }

.modelos { width: 100%; border-collapse: collapse; font-size: .97rem; }
.modelos th { text-align: left; font: 800 .95rem/1 var(--f-titulo); letter-spacing: .06em; text-transform: uppercase; background: var(--negro); color: var(--blanco); padding: 12px; }
.modelos td { padding: 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.modelos tr:nth-child(even) td { background: var(--fondo); }
.modelos td:last-child { text-align: right; white-space: nowrap; }
.modelos__nombre { font: 800 1.15rem/1 var(--f-titulo); text-transform: uppercase; }
@media (max-width: 639px) {
  .modelos thead { display: none; }
  .modelos tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px; border-bottom: 1px solid var(--linea); }
  .modelos td { padding: 0; border: 0; background: none !important; }
  .modelos td[data-et]::before { content: attr(data-et) ": "; color: var(--gris); font-size: .85rem; }
  .modelos td:last-child { grid-row: 1 / span 4; grid-column: 2; align-self: center; }
  .modelos td:empty { display: none; }
}

.ficha-secciones { display: grid; gap: clamp(28px, 4vw, 40px); }
@media (min-width: 960px) { .ficha-secciones { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.bloque h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); display: flex; align-items: center; gap: 10px; }
.bloque h2::before { content: ""; width: 8px; height: .9em; background: var(--rojo); transform: skewX(-18deg); }
.lista-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lista-check li { display: flex; gap: 10px; align-items: flex-start; }
.lista-check li::before { content: "\F26E"; font-family: bootstrap-icons; color: var(--blanco); background: var(--rojo); width: 22px; height: 22px; border-radius: 4px; display: grid; place-items: center; font-size: .9rem; flex: none; margin-top: 2px; }
.specs { width: 100%; border-collapse: collapse; }
.specs th, .specs td { padding: 11px 0; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.specs th { width: 45%; color: var(--gris); font-weight: 600; padding-right: 12px; }
.aviso-ref { font-size: .85rem; color: var(--gris); margin-top: 10px; }

.barra-ficha { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; transform: translateY(110%); transition: transform .25s; display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--blanco); border-top: 1px solid var(--linea); box-shadow: 0 -8px 24px rgba(0, 0, 0, .08); }
.barra-ficha.visible { transform: none; }
@media (min-width: 960px) { .barra-ficha { display: none; } }

/* ---------- Contacto ---------- */
.contacto { display: grid; gap: 28px; }
@media (min-width: 960px) { .contacto { grid-template-columns: 1fr 1.15fr; align-items: start; } }
.canales { display: grid; gap: 10px; }
.canal { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radio-g); border: 1px solid var(--linea); background: var(--blanco); transition: border-color .2s, transform .2s; }
a.canal:hover { border-color: var(--rojo); transform: translateX(3px); }
.canal i { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--radio); background: var(--negro); color: var(--blanco); font-size: 1.35rem; }
.canal--wa i { background: var(--wa); }
.canal span { display: block; font-size: .82rem; color: var(--gris); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.canal strong { font-size: 1.08rem; }
.mapa { height: 340px; border-radius: var(--radio-g); overflow: hidden; border: 1px solid var(--linea); background: var(--fondo); z-index: 0; }
.mapa-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; font-size: .9rem; color: var(--gris); flex-wrap: wrap; }

/* ---------- Nosotros ---------- */
.nosotros { display: grid; gap: 32px; }
@media (min-width: 960px) { .nosotros { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 56px; } }

/* ---------- 404 ---------- */
.error-404 { text-align: center; padding-block: clamp(60px, 10vw, 120px); }
.error-404 strong { display: block; font: 800 clamp(6rem, 18vw, 11rem)/1 var(--f-titulo); color: var(--rojo); }
.portada__texto .h1-like { font-size: clamp(2.3rem, 6vw, 4.2rem); margin: 0 0 16px; }

/* ---------- Servicios (página) ---------- */
.servicio-fila { display: grid; gap: 22px; align-items: center; }
@media (min-width: 900px) { .servicio-fila { grid-template-columns: 1fr 1.1fr; gap: 48px; } .servicio-fila--inv .servicio-fila__foto { order: 2; } }
.servicio-fila__foto { position: relative; border-radius: var(--radio-g); overflow: hidden; aspect-ratio: 4 / 3; background: var(--negro); }
.servicio-fila__foto img { width: 100%; height: 100%; object-fit: cover; }
.servicio-fila__icono { position: absolute; inset: 0; display: grid; place-items: center; font-size: 6rem; color: var(--blanco); background: linear-gradient(135deg, var(--negro) 55%, var(--rojo) 55%); }
.servicio-fila h2 { margin-bottom: 14px; }
.servicio-fila .prosa { margin-bottom: 18px; }