/**
 * /chapas-con-filtros-ia. Sale del boceto 5 de bocetos/ia-landing-8-opciones.html
 * y copia las piezas de /chapas-personalizadas (cabecera, títulos de sección y
 * preguntas), con su propio prefijo .mch-fi- para no pisarse con nadie.
 *
 * La página es un contenedor (container-type) y la rejilla cambia según su
 * ancho, igual que en /chapas-personalizadas.
 */
.mch-fi{
  --brand:#0068ae; --brand-dark:#004776; --accent:#f2701b;
  --line:#e8eef4; --txt:#20303f; --txt2:#54636f;
  --shadow:0 3px 12px rgba(15,45,75,.10);
  container-type:inline-size;
  color:var(--txt); padding-bottom:10px;
}
.mch-fi *{ box-sizing:border-box; }
.mch-fi h1,.mch-fi h2,.mch-fi h3{ letter-spacing:-.02em; }
.mch-fi img{ max-width:100%; }

/* ---------- botones ---------- */
.mch-fi .mch-fi-btn{ display:inline-flex; align-items:center; text-decoration:none; font-weight:800; font-size:.95rem;
  padding:14px 26px; border-radius:8px; border:0; white-space:nowrap; transition:.16s; }
.mch-fi .mch-fi-btn-cta{ background:var(--accent); color:#fff; box-shadow:0 4px 14px rgba(242,112,27,.34); }
.mch-fi .mch-fi-btn:hover{ color:#fff; transform:translateY(-1px); }

/* ---------- cabecera ---------- */
.mch-fi-hero{ background:linear-gradient(90deg,#00365a 0%,#0068ae 62%,#1c86cc 100%); color:#fff; border-radius:12px;
  padding:34px clamp(18px,3cqw,32px); display:grid; gap:28px; align-items:center; }
@container (min-width:900px){ .mch-fi-hero{ grid-template-columns:1fr 380px; } }
.mch-fi .mch-fi-hero h1{ margin:8px 0 10px; font-size:clamp(1.6rem,3.2cqw,2.1rem); line-height:1.15; font-weight:800; color:#fff; }
.mch-fi-hero p{ margin:0 0 18px; color:#d7ecfb; }
.mch-fi-kicker{ font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#a8dcff; }
.mch-fi-desde{ display:block; font-size:.8rem; color:#a8dcff; margin-top:11px; font-weight:600; }

/* la foto detrás, pequeña; la chapa delante y grande */
.mch-fi-pareja{ position:relative; width:min(380px,100%); aspect-ratio:1/1; margin:0 auto; }
.mch-fi-foto{ position:absolute; left:0; top:0; width:46%; transform:rotate(-4deg); display:block; overflow:hidden;
  border:5px solid #fff; border-radius:10px; box-shadow:0 10px 26px rgba(0,0,0,.35); }
.mch-fi-foto img{ display:block; width:100%; height:auto; }
.mch-fi-pareja .mch-fi-disco{ position:absolute; right:0; bottom:0; width:78%; box-shadow:0 18px 44px rgba(0,0,0,.45); }

/* ---------- la chapa ----------
   De frente solo se ve el 80 % central del radio: el resto se dobla al canto
   (R_CHAPA = 80 de 100 en milchapitaseditor/views/js/chapasvg.js). Por eso la
   imagen se amplía a 1/0,8 = 125 %, y así el remate del bordado o el dentado del
   sello caen en el canto, como en la chapa de verdad. Canto y brillo, copiados
   de chapasvg.js (el canto empieza en RV/R_CHAPA = 89,3 %). */
.mch-fi-disco{ display:block; position:relative; aspect-ratio:1/1; border-radius:50%; overflow:hidden;
  background:#f2f4f6; box-shadow:var(--shadow); }
.mch-fi-disco img{ display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.25); }
.mch-fi-disco::after{ content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(55% 55% at 30% 22%, rgba(255,255,255,.30) 0, rgba(255,255,255,0) 62%),
    radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0) 89.3%, rgba(0,0,0,.16) 94%, rgba(0,0,0,.42) 100%); }
/* Pop art trae las cabezas pegadas arriba: a 125 % se cortan. Se enseña como la
   dejaría el cliente, reducida. */
.mch-fi-disco[data-estilo="pop-art"] img{ transform:none; }

/* ---------- secciones ---------- */
.mch-fi-bloque{ padding:40px 0 0; }
.mch-fi-sec-head{ margin:0 0 22px; }
.mch-fi .mch-fi-sec-head h2{ position:relative; display:inline-block; margin:0; padding-bottom:14px; font-size:clamp(20px,2.3cqw,27px);
  font-weight:800; line-height:1.15; color:var(--brand-dark); }
.mch-fi-sec-head h2::after{ content:""; position:absolute; left:0; bottom:-2px; width:100%; height:2px; background:var(--brand); }
.mch-fi-sec-head p{ margin:14px 0 0; color:var(--txt2); }

/* ---------- los estilos ---------- */
.mch-fi-estilos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
@container (min-width:640px){ .mch-fi-estilos{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@container (min-width:900px){ .mch-fi-estilos{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@container (min-width:1200px){ .mch-fi-estilos{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.mch-fi-caja{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; display:flex; flex-direction:column; }
.mch-fi-caja .mch-fi-disco{ margin-bottom:10px; }
.mch-fi .mch-fi-caja h3{ margin:0; font-size:.95rem; font-weight:800; color:var(--brand-dark); }
.mch-fi-caja p{ margin:2px 0 10px; font-size:.82rem; color:var(--txt2); }
/* el botón, siempre al pie de la caja, aunque el texto sea más corto */
.mch-fi .mch-fi-abrir{ align-self:flex-start; margin-top:auto; display:inline-block; background:#fff; color:var(--brand-dark);
  border-radius:10px; padding:8px 16px; font-weight:800; font-size:.84rem; text-decoration:none;
  box-shadow:0 4px 14px rgba(0,32,58,.16); }
.mch-fi .mch-fi-abrir:hover{ color:var(--brand); }

/* ---------- preguntas frecuentes: las de /chapas-personalizadas ---------- */
.mch-fi-faq details{ background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); margin:0 0 10px; }
.mch-fi-faq summary{ cursor:pointer; padding:14px 18px; font-weight:800; color:var(--brand-dark); list-style:none;
  display:flex; justify-content:space-between; gap:10px; }
.mch-fi-faq summary::-webkit-details-marker{ display:none; }
.mch-fi-faq summary::after{ content:"+"; color:var(--brand); font-size:20px; line-height:1; }
.mch-fi-faq details[open] summary::after{ content:"−"; }
.mch-fi-faq details p{ padding:0 18px 16px; margin:0; color:var(--txt2); }