/* Ficha de producto, propuesta B (estilo Apple). Se carga DESPUÉS de css/estilos.css.
   Mobile first (390 px); escritorio desde 981 px. Prefijo propio fa-; no usa ni toca .ficha*.
   Animaciones: solo transform y opacity. */

.fa {
  --fa-verde: #85be3f;
  --fa-verde-hover: #74a937;
  --fa-verde-texto: #46691a;      /* 6,4:1 sobre blanco */
  --fa-sobre-verde: #1c2a0c;      /* 6,7:1 sobre #85be3f */
  --fa-fondo: #f4f8ee;            /* secciones alternas */
  --fa-blanco: #ffffff;
  --fa-borde: #e3e8dc;
  --fa-titulo: #1d1d1b;
  --fa-texto: #3d3d3d;            /* 10:1 sobre blanco */
  --fa-texto-2: #5c5c5c;          /* 6,8:1 */
  --fa-s1: 4px; --fa-s2: 8px; --fa-s3: 12px; --fa-s4: 16px; --fa-s5: 24px; --fa-s6: 32px; --fa-s7: 48px; --fa-s8: 64px; --fa-s9: 96px; --fa-s10: 128px;
  --fa-r-s: 10px; --fa-r-m: 20px; --fa-r-l: 28px;
  --fa-sombra: 0 1px 2px rgba(20, 30, 10, .04), 0 8px 24px rgba(20, 30, 10, .06);
  --fa-alto-local: 56px;
  color: var(--fa-texto);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
}
.fa a { color: var(--fa-verde-texto); }
.fa :focus-visible { outline: 3px solid var(--fa-verde-texto); outline-offset: 3px; }
.fa h1, .fa h2, .fa h3 { color: var(--fa-titulo); padding: 0; margin: 0; letter-spacing: -.02em; }
.fa-contenedor { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: var(--fa-s5); padding-right: var(--fa-s5); }
.fa-contenedor--ancho { max-width: 1440px; padding-left: var(--fa-s2); padding-right: var(--fa-s2); }
.fa-contenedor--medio { max-width: 980px; }

/* ===== Botones ===== */
.fa-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--fa-s3); min-height: 48px; padding: var(--fa-s3) var(--fa-s6); border: 2px solid transparent; border-radius: 980px; font: 700 16px/1.3 var(--fuente-texto); text-align: center; text-decoration: none; cursor: pointer; transition: transform .2s ease, opacity .2s ease; }
.fa-btn svg { flex: none; width: 20px; height: 20px; }
.fa-btn--primario { background: var(--fa-verde); color: var(--fa-sobre-verde) !important; }
.fa-btn--primario:hover { background: var(--fa-verde-hover); opacity: 1; transform: scale(1.02); }
.fa-btn--texto { color: var(--fa-verde-texto) !important; }
.fa-btn--texto::after { content: "›"; font-size: 1.3em; line-height: 1; transition: transform .2s ease; }
.fa-btn--texto:hover { opacity: 1; text-decoration: underline; }
.fa-btn--texto:hover::after { transform: translateX(3px); }
.fa-btn--s { min-height: 44px; padding: var(--fa-s2) var(--fa-s5); font-size: 14px; }

/* ===== Barra local (sticky bajo la cabecera, que al bajar se compacta a 54 px) ===== */
.fa-local { position: sticky; top: 54px; z-index: 80; background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--fa-borde); }
@supports (backdrop-filter: blur(1px)) { .fa-local { background: rgba(255, 255, 255, .78); backdrop-filter: saturate(180%) blur(16px); } }
.fa-local__in { display: flex; align-items: center; justify-content: space-between; gap: var(--fa-s4); max-width: 1200px; min-height: var(--fa-alto-local); margin: 0 auto; padding: var(--fa-s2) var(--fa-s5); }
.fa-local__nombre { margin: 0; padding: 0; font: 700 20px/1.2 var(--fuente-titulo); color: var(--fa-titulo); }
.fa-local__enlaces { display: none; }
.fa-local__enlaces a { display: inline-block; padding: var(--fa-s3) 0; margin-left: var(--fa-s6); font-size: 14px; color: var(--fa-texto-2); text-decoration: none; }
.fa-local__enlaces a:hover { color: var(--fa-titulo); opacity: 1; }

/* ===== Hero ===== */
.fa-hero { background: var(--fa-fondo); padding: var(--fa-s5) 0 var(--fa-s8); overflow: hidden; }
.fa-migas { display: flex; flex-wrap: wrap; gap: var(--fa-s1) var(--fa-s2); margin: 0 0 var(--fa-s6); padding: 0; font-size: 14px; line-height: 1.4; list-style: none; }
.fa-migas li + li::before { content: "›"; margin-right: var(--fa-s2); color: var(--fa-texto-2); }
.fa-migas a { display: inline-block; padding: var(--fa-s2) 0; font-weight: 600; }
.fa-hero__texto { text-align: center; max-width: 1120px; margin: 0 auto; }
.fa-eyebrow { margin: 0 0 var(--fa-s3); padding: 0; font: 700 14px/1.4 var(--fuente-titulo); letter-spacing: .18em; text-transform: uppercase; color: var(--fa-verde-texto); }
.fa-hero h1 { font-size: clamp(32px, 9.4vw, 84px); line-height: 1.05; margin-bottom: var(--fa-s5); overflow-wrap: break-word; }
.fa-hero__intro { margin: 0 auto var(--fa-s6); padding: 0; max-width: 68ch; font-size: 17px; line-height: 1.6; color: var(--fa-texto-2); text-align: left; }
.fa-acciones { display: flex; flex-direction: column; align-items: stretch; gap: var(--fa-s2); }

/* escenario del visor: a lo grande, con el 3D centrado */
.fa-escenario { margin-top: var(--fa-s7); background: var(--fa-blanco); border-radius: var(--fa-r-m); padding: var(--fa-s4) var(--fa-s4) var(--fa-s5); }
.fa-visor__marco.visor3d__marco { aspect-ratio: auto; max-width: none; height: min(72svh, 600px); min-height: 440px; background: transparent; }
.fa-visor .visor3d__poster { height: 100%; }
.fa-visor .visor3d__ayuda { display: block; opacity: 0; min-height: 4.2em; margin: var(--fa-s3) auto 0; max-width: 56ch; font-size: 13px; line-height: 1.4; color: var(--fa-texto-2); transition: opacity .4s ease; }
.fa-visor.visor3d--listo .visor3d__ayuda { opacity: 1; }
.fa-visor .visor3d__estado { font-size: 13px; margin: 0; }

/* escenario SIN visor 3D: la foto del producto, a su tamaño (nunca ampliada), centrada sobre la tarjeta blanca */
.fa-escenario--foto { display: flex; justify-content: center; }
.fa-foto { margin: 0; }
.fa-foto img { display: block; width: auto; height: auto; max-width: 100%; max-height: 380px; }
.fa-escenario--chica { max-width: 640px; margin-left: auto; margin-right: auto; padding: var(--fa-s6) var(--fa-s4); }
.fa-declaracion__resto { max-width: 38em; margin: var(--fa-s5) auto 0; padding: 0; font-size: 17px; line-height: 1.6; text-align: center; color: var(--fa-texto-2); }
.fa-tile .fa-tile__resto { font-size: 15px; color: var(--fa-texto-2); }
.fa-tile--verde .fa-tile__resto { color: var(--fa-sobre-verde); }
/* sin declaración: destacados en blanco y especificaciones en claro, para que sigan alternando */
.fa-destacados.fa-destacados--blanco { background: var(--fa-blanco); }
.fa-destacados--blanco .fa-tile { background: var(--fa-fondo); box-shadow: none; }
.fa-destacados--blanco .fa-tile--verde { background: var(--fa-verde); }
.fa-specs.fa-specs--claro { background: var(--fa-fondo); }

/* ===== Declaración ===== */
.fa-declaracion { background: var(--fa-blanco); padding: var(--fa-s8) 0; }
.fa-declaracion__texto { max-width: 26em; margin: 0 auto; padding: 0; font: 700 22px/1.35 var(--fuente-titulo); letter-spacing: -.01em; text-align: center; color: var(--fa-titulo); }

/* ===== Secciones ===== */
.fa-seccion-titulo { font-size: clamp(30px, 8vw, 56px); line-height: 1.1; margin-bottom: var(--fa-s6) !important; text-align: center; }

/* ===== Destacados (bento) ===== */
.fa-destacados { background: var(--fa-fondo); padding: var(--fa-s8) 0; }
.fa-bento { display: grid; gap: var(--fa-s3); }
.fa-tile { background: var(--fa-blanco); border-radius: var(--fa-r-m); padding: var(--fa-s6) var(--fa-s5); box-shadow: var(--fa-sombra); }
.fa-tile h3 { margin-bottom: var(--fa-s3); font: 700 13px/1.3 var(--fuente-titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--fa-verde-texto); }
.fa-tile p { margin: 0; padding: 0; font-size: 17px; line-height: 1.5; color: var(--fa-texto); }
.fa-tile .fa-tile__grande { font: 700 28px/1.15 var(--fuente-titulo); letter-spacing: -.02em; color: var(--fa-titulo); margin-bottom: var(--fa-s3); }
.fa-tile--verde { background: var(--fa-verde); box-shadow: none; }
.fa-tile--verde h3, .fa-tile--verde p, .fa-tile--verde .fa-tile__grande { color: var(--fa-sobre-verde); }
.fa-kv { margin: 0; padding: 0; list-style: none; }
.fa-kv li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fa-s4); padding: var(--fa-s3) 0; border-top: 1px solid var(--fa-borde); }
.fa-kv li:first-child { border-top: 0; padding-top: 0; }
.fa-kv span { font-size: 15px; color: var(--fa-texto-2); }
.fa-kv strong { font: 700 28px/1.1 var(--fuente-titulo); letter-spacing: -.02em; color: var(--fa-titulo); white-space: nowrap; }
.fa-kv--largo li { flex-wrap: wrap; }
.fa-kv--largo strong { font-size: 22px; }

/* ===== Especificaciones ===== */
.fa-specs { background: var(--fa-blanco); padding: var(--fa-s8) 0 var(--fa-s9); }
.fa-tabla { margin: 0; padding: 0; border-top: 1px solid var(--fa-borde); }
.fa-fila { display: grid; gap: var(--fa-s2); padding: var(--fa-s5) 0; border-bottom: 1px solid var(--fa-borde); }
.fa-fila dt { font: 700 16px/1.4 var(--fuente-titulo); color: var(--fa-titulo); }
.fa-fila dd { margin: 0; font-size: 17px; line-height: 1.6; color: var(--fa-texto); max-width: 68ch; }
.fa-linea { display: block; }
.fa-linea + .fa-linea { margin-top: var(--fa-s2); }
.fa-linea strong { color: var(--fa-titulo); }

/* ===== Revelado: solo con JS y sin reduced-motion (fa-js); sin ello, todo visible ===== */
.fa-js .fa-rev { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1); }
.fa-js .fa-rev.fa-in { opacity: 1; transform: none; }
.fa-js .fa-bento .fa-rev:nth-child(2) { transition-delay: .08s; }
.fa-js .fa-bento .fa-rev:nth-child(3) { transition-delay: .16s; }
.fa-js .fa-bento .fa-rev:nth-child(4) { transition-delay: .08s; }
.fa-js .fa-bento .fa-rev:nth-child(5) { transition-delay: .16s; }

/* ===== Tablet ===== */
@media (min-width: 640px) {
  .fa-bento { grid-template-columns: 1fr 1fr; }
  .fa-tile--presion, .fa-tile--sectores { grid-column: 1 / -1; }
}
@media (min-width: 640px) {
  .fa-bento--3 .fa-tile:nth-child(3) { grid-column: 1 / -1; }
  .fa-bento--4 .fa-tile, .fa-bento--4i .fa-tile { grid-column: auto; }
}
/* ===== Escritorio ===== */
@media (min-width: 981px) {
  .fa { font-size: 19px; }
  .fa-local__enlaces { display: block; }
  .fa-hero { padding: var(--fa-s6) 0 var(--fa-s10); }
  .fa-hero h1 { font-size: 72px; }
  .fa-hero__intro { font-size: 21px; line-height: 1.55; }
  .fa-acciones { flex-direction: row; justify-content: center; align-items: center; }
  .fa-escenario { margin-top: var(--fa-s8); border-radius: var(--fa-r-l); padding: var(--fa-s7) var(--fa-s7) var(--fa-s6); }
  .fa-contenedor--ancho { padding-left: var(--fa-s5); padding-right: var(--fa-s5); }
  .fa-visor__marco.visor3d__marco { height: min(calc(100svh - 54px - var(--fa-alto-local) - 96px), 860px); min-height: 520px; }
  .fa-declaracion { padding: var(--fa-s10) 0; }
  .fa-declaracion__texto { font-size: 40px; line-height: 1.25; max-width: 24em; }
  .fa-destacados { padding: var(--fa-s10) 0; }
  .fa-specs { padding: var(--fa-s10) 0; }
  .fa-seccion-titulo { margin-bottom: var(--fa-s8) !important; }
  .fa-bento { grid-template-columns: repeat(6, 1fr); gap: var(--fa-s4); }
  .fa-foto img { max-height: 560px; }
  .fa-escenario--foto { padding: var(--fa-s7); }
  .fa-escenario--chica { padding: var(--fa-s7) var(--fa-s6); }
  .fa-declaracion__resto { font-size: 19px; }
  .fa-hero__intro.fa-hero__intro--larga { font-size: 19px; line-height: 1.6; }
  .fa-tile { padding: var(--fa-s7); border-radius: var(--fa-r-l); }
  .fa-tile--presion { grid-column: span 4; grid-row: span 2; }
  .fa-tile--tamano { grid-column: span 2; }
  .fa-tile--actuadores { grid-column: span 2; }
  .fa-tile--sectores { grid-column: span 4; }
  .fa-tile--aplicaciones { grid-column: span 2; }
  .fa-tile--presion .fa-kv strong { font-size: 48px; }
  .fa-tile--presion .fa-kv--largo strong { font-size: 28px; }
  .fa-tile--presion .fa-kv span { font-size: 19px; }
  .fa-tile--presion .fa-kv li { padding: var(--fa-s5) 0; }
  .fa-tile--presion .fa-kv li:first-child { padding-top: 0; }
  .fa-tile .fa-tile__grande { font-size: 32px; }
  /* reparto con menos de 5 tarjetas (6 columnas) */
  .fa-bento--4 .fa-tile, .fa-bento--3 .fa-tile { grid-row: auto; }
  .fa-bento--4 .fa-tile:nth-child(1) { grid-column: span 4; }
  .fa-bento--4 .fa-tile:nth-child(2) { grid-column: span 2; }
  .fa-bento--4 .fa-tile:nth-child(n+3) { grid-column: span 3; }
  .fa-bento--4i .fa-tile:nth-child(1) { grid-column: span 2; }
  .fa-bento--4i .fa-tile:nth-child(2) { grid-column: span 4; }
  .fa-bento--4i .fa-tile:nth-child(n+3) { grid-column: span 3; }
  .fa-bento--3 .fa-tile:nth-child(-n+2) { grid-column: span 3; }
  .fa-bento--3 .fa-tile:nth-child(3) { grid-column: 1 / -1; }
  .fa-bento--4i .fa-tile { grid-row: auto; }
  .fa-fila { grid-template-columns: 240px 1fr; gap: var(--fa-s7); padding: var(--fa-s6) 0; }
}
@media (min-width: 1280px) {
  .fa-hero h1 { font-size: 84px; }
}
@media (max-width: 400px) {
  .fa-local .fa-btn--s { padding: var(--fa-s2) var(--fa-s4); }
}
@media (prefers-reduced-motion: reduce) {
  .fa-btn, .fa-btn--texto::after, .fa-visor .visor3d__ayuda { transition: none; }
  .fa-btn--primario:hover { transform: none; }
}