/**
 * /chapas-personalizadas. Sale del boceto 4 (bocetos/pagina-chapas-personalizadas-6-opciones.html),
 * que a su vez copia las piezas de custom.css, equipos.css y la ficha.
 *
 * Todo con el prefijo .mch-cp- para no pisarse con el tema ni con Bootstrap.
 * La página es un contenedor (container-type) y las rejillas cambian según su
 * ancho, igual que en el boceto.
 */

/* Las letras de las chapas de ejemplo: las mismas del editor, autoalojadas. */
@font-face{ font-family:"MchPacifico"; src:url(../fonts/pacifico.woff2) format("woff2"); font-display:swap; }
@font-face{ font-family:"MchBebas"; src:url(../fonts/bebas-neue.woff2) format("woff2"); font-display:swap; }
@font-face{ font-family:"MchCaveat"; src:url(../fonts/caveat.woff2) format("woff2"); font-display:swap; }

.mch-cp{
  --brand:#0068ae; --brand-dark:#004776; --brand-deep:#00365a; --accent:#f2701b;
  --line:#e8eef4; --muted:#7a8794; --txt:#20303f; --txt2:#54636f;
  --shadow:0 3px 12px rgba(15,45,75,.10);
  container-type:inline-size;
  color:var(--txt); padding-bottom:10px;
}
.mch-cp *{ box-sizing:border-box; }
.mch-cp h1,.mch-cp h2,.mch-cp h3{ letter-spacing:-.02em; }
.mch-cp a{ color:var(--brand); }
.mch-cp a:hover{ text-decoration:none; }
.mch-cp img{ max-width:100%; }

/* ---------- botones ---------- */
.mch-cp-botones{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.mch-cp .mch-cp-btn{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:800; font-size:.95rem; letter-spacing:.01em; padding:14px 26px; border-radius:8px; border:0; white-space:nowrap; transition:.16s; }
.mch-cp .mch-cp-btn-cta{ background:var(--accent); color:#fff; box-shadow:0 4px 14px rgba(242,112,27,.34); }
.mch-cp .mch-cp-btn-linea{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.70); padding:12px 24px; }
.mch-cp .mch-cp-btn:hover{ color:#fff; transform:translateY(-1px); }
.mch-cp .mch-cp-b-azul{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:52px; padding:0 26px; border:0; border-radius:999px; background:var(--brand); color:#fff; font-weight:800; font-size:1.02rem; box-shadow:0 3px 10px rgba(0,104,174,.28); text-decoration:none; white-space:nowrap; }
.mch-cp .mch-cp-b-azul:hover{ color:#fff; background:var(--brand-dark); }
.mch-cp .mch-cp-b-pq{ height:44px; font-size:.95rem; }
.mch-cp .mch-cp-b-contorno{ display:inline-block; border:2px solid var(--brand); border-radius:6px; padding:7px 14px; color:var(--brand-dark); font-weight:700; font-size:.9rem; text-decoration:none; background:#fff; }

/* ---------- cabecera ---------- */
.mch-cp-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:24px; align-items:center; }
@container (min-width:900px){ .mch-cp-hero{ grid-template-columns:minmax(260px,500px) 1fr; } .mch-cp-desde{ white-space:nowrap; } }
.mch-cp .mch-cp-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-cp-hero p{ margin:0 0 18px; color:#d7ecfb; }
.mch-cp-kicker{ font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#a8dcff; }
.mch-cp-desde{ display:block; font-size:.8rem; color:#a8dcff; margin-top:11px; font-weight:600; }
.mch-cp-muro{ display:grid; grid-template-columns:repeat(auto-fill,46px); gap:8px; justify-content:center; max-height:216px; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 60%,transparent 100%); mask-image:linear-gradient(180deg,#000 0,#000 60%,transparent 100%); }
.mch-cp-muro .mch-cp-ch{ padding:4px; font-size:6.5px; }

/* ---------- navegación por ocasiones ---------- */
.mch-cp-navoc{ position:sticky; top:0; z-index:5; background:#f2f4f6; padding:12px 0; display:flex; gap:6px; overflow-x:auto; margin-top:18px; }
.mch-cp .mch-cp-navoc a{ flex:none; display:flex; align-items:center; height:32px; padding:0 14px; background:#fff; border:1px solid var(--line); border-radius:999px; box-shadow:0 2px 8px rgba(15,45,75,.08); color:var(--brand-dark); font-size:.83rem; font-weight:700; text-decoration:none; }
.mch-cp .mch-cp-navoc a:first-child{ background:var(--brand); border-color:var(--brand); color:#fff; }
.mch-cp-ocas section,.mch-cp-bloque{ scroll-margin-top:70px; }

/* ---------- tarjetas ---------- */
.mch-cp-cb{ background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; }
.mch-cp-im{ padding:16px; min-height:150px; background:linear-gradient(165deg,#e9f4fc,#fff 74%); display:flex; gap:10px; align-items:center; justify-content:center; border-bottom:1px solid var(--line); }
.mch-cp-im-alta{ min-height:186px; }
.mch-cp-tx{ padding:13px 17px 15px; flex:1; display:flex; flex-direction:column; }
.mch-cp .mch-cp-cb h2,.mch-cp .mch-cp-cb h3{ margin:0; font-size:1.08rem; font-weight:800; color:var(--brand-dark); line-height:1.2; }
.mch-cp-cc{ display:block; margin-top:2px; font-size:.84rem; font-weight:700; color:var(--muted); }
.mch-cp-mv{ margin:7px 0 0; font-size:.84rem; color:#5b6772; line-height:1.45; }
.mch-cp .mch-cp-cv{ display:inline-block; margin-top:auto; padding-top:9px; font-size:.85rem; font-weight:800; color:var(--brand); text-decoration:none; }
.mch-cp-ideas{ display:flex; flex-wrap:wrap; gap:5px; margin:10px 0 2px; }
.mch-cp-ideas span{ padding:2px 9px; border-radius:20px; background:#e8eef4; color:var(--brand-dark); font-weight:700; font-size:.78rem; }

.mch-cp-ocas{ display:grid; gap:18px; grid-template-columns:minmax(0,1fr); }
@container (min-width:700px){
  .mch-cp-ocas{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mch-cp-ancha{ grid-column:1/-1; flex-direction:row; }
  .mch-cp-ancha .mch-cp-im{ flex:0 0 360px; border-bottom:0; border-right:1px solid var(--line); }
}
@container (min-width:1300px){ .mch-cp-ocas{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.mch-cp-ancha .mch-cp-tx{ padding:24px 28px; justify-content:center; }
.mch-cp .mch-cp-ancha h2{ font-size:1.5rem; }
.mch-cp-ancha .mch-cp-mv{ font-size:.95rem; max-width:70ch; }
.mch-cp-ancha .mch-cp-b-azul{ align-self:flex-start; margin-top:10px; }
/* en móvil las 8 tarjetas pequeñas se tumban (foto a la izquierda) para no alargar la página */
@container (max-width:699px){
  .mch-cp-ocas .mch-cp-cb:not(.mch-cp-ancha){ flex-direction:row; }
  .mch-cp-ocas .mch-cp-cb:not(.mch-cp-ancha) .mch-cp-im{ flex:0 0 104px; min-height:0; padding:10px; border-bottom:0; border-right:1px solid var(--line); }
  .mch-cp-ocas .mch-cp-cb:not(.mch-cp-ancha) .mch-cp-im .mch-cp-ch + .mch-cp-ch{ display:none; }
  .mch-cp-ocas .mch-cp-cb:not(.mch-cp-ancha) .mch-cp-im .mch-cp-ch{ width:80px; height:80px; padding:10px; font-size:11px; }
  .mch-cp-ocas .mch-cp-cb:not(.mch-cp-ancha) .mch-cp-ideas{ display:none; }
  .mch-cp-ocas .mch-cp-cb:not(.mch-cp-ancha) .mch-cp-tx{ padding:12px 14px; }
}

/* ---------- secciones ---------- */
.mch-cp-bloque{ padding:40px 0 0; }
.mch-cp-sec-head{ display:flex; flex-direction:column; align-items:flex-start; margin:0 0 22px; }
.mch-cp .mch-cp-sec-head h2{ position:relative; margin:0; padding-bottom:14px; font-size:clamp(20px,2.3cqw,27px); font-weight:800; line-height:1.15; color:var(--brand-dark); }
.mch-cp-sec-head h2::after{ content:""; position:absolute; left:0; bottom:-2px; width:100%; height:2px; background:var(--brand); }
.mch-cp-cab-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:14px; }
.mch-cp-cab-cta p{ margin:0; font-size:1rem; color:var(--txt); }
.mch-cp-cab-cta .mch-cp-b-azul{ height:44px; font-size:.95rem; flex:none; }

.mch-cp-rej{ display:grid; gap:18px; grid-template-columns:minmax(0,1fr); }
@container (min-width:640px){ .mch-cp-r3,.mch-cp-r4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@container (min-width:980px){ .mch-cp-r3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .mch-cp-r4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.mch-cp-blanco{ background:#fff; border-radius:12px; box-shadow:var(--shadow); padding:clamp(18px,3cqw,32px); margin-top:18px; }

/* filas «mundo» de la portada */
.mch-cp-mundo{ display:flex; align-items:center; gap:13px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:12px 14px; }
.mch-cp-mi{ width:52px; height:52px; flex:none; border-radius:8px; background:linear-gradient(165deg,#eef6fc,#fff); display:grid; place-items:center; }
.mch-cp-mi svg{ width:24px; height:24px; fill:none; stroke:var(--brand); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mch-cp .mch-cp-mundo h3{ display:block; margin:0; font-size:.95rem; font-weight:800; color:#2a3540; line-height:1.25; }
.mch-cp-mundo p{ display:block; margin:2px 0 0; font-size:.82rem; color:var(--muted); font-weight:600; line-height:1.4; }
.mch-cp-destacado{ background:linear-gradient(120deg,var(--brand-dark),var(--brand)); border-color:var(--brand-dark); }
.mch-cp .mch-cp-destacado h3{ color:#fff; }
.mch-cp-destacado p{ color:#a8dcff; }

/* caja «Diséñala tú» de la ficha */
.mch-cp-dt{ display:flex; gap:16px; align-items:center; margin:14px 0 0; background:#f4f9fd; border:1px solid #d6e6f3; border-radius:10px; padding:14px 16px; }
.mch-cp-dt img{ width:64px; height:64px; flex:none; }
.mch-cp-dt b{ display:block; color:#16212e; font-size:1rem; }
.mch-cp-dt p{ margin:2px 0 8px; font-size:.88rem; color:var(--txt2); }

/* tabla de tramos de la ficha */
.mch-cp-pills{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.mch-cp-pills button{ font:700 .88rem/1.2 inherit; padding:9px 16px; border-radius:999px; border:1px solid #d5dfe7; background:#fff; color:var(--txt); cursor:pointer; }
.mch-cp-pills button[aria-pressed=true]{ background:var(--brand); border-color:var(--brand); color:#fff; }
.mch-cp-tramos{ padding:14px 16px; background:#f2f8fc; border-radius:12px; box-shadow:0 3px 12px rgba(0,104,174,.13); }
.mch-cp-tramos[hidden]{ display:none; }
.mch-cp-tramos-cab{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin:0 0 10px; flex-wrap:wrap; }
.mch-cp-tramos-cab b{ font-size:1rem; font-weight:800; color:var(--brand-deep); }
.mch-cp-tramos-cab span{ font-size:.8rem; font-weight:700; color:var(--brand); }
.mch-cp-tramo{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fff; border:1px solid #dbe9f4; border-radius:8px; padding:10px 12px; margin:0 0 6px; }
.mch-cp-tramo:last-child{ margin-bottom:0; }
.mch-cp-tt{ display:flex; flex-direction:column; justify-content:center; min-height:2.25rem; }
.mch-cp-rg{ font-size:.95rem; font-weight:700; color:#16212e; line-height:1.3; }
.mch-cp-ah{ font-size:.75rem; font-weight:700; color:var(--brand); line-height:1.3; }
.mch-cp-pr{ font-size:1.35rem; font-weight:800; color:#16212e; white-space:nowrap; line-height:1.1; }
.mch-cp-pr span{ font-size:.8rem; font-weight:400; color:var(--muted); }

/* las dos vías con sus pasos */
.mch-cp-vias{ display:grid; gap:22px; grid-template-columns:minmax(0,1fr); }
@container (min-width:760px){ .mch-cp-vias{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.mch-cp-via{ background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.mch-cp-via-cab{ display:flex; align-items:center; gap:16px; padding:18px 22px; border-bottom:1px solid var(--line); }
.mch-cp-via-cab img{ width:62px; height:62px; flex:none; object-fit:contain; }
.mch-cp .mch-cp-via-cab h3{ margin:0; font-size:1.06rem; font-weight:800; color:var(--brand-dark); }
.mch-cp-cond{ display:block; margin-top:3px; font-size:.82rem; color:var(--muted); font-weight:600; }
.mch-cp-via ol{ margin:0; padding:16px 22px 20px; list-style:none; counter-reset:p; }
.mch-cp-via ol li{ position:relative; padding:9px 0 9px 40px; counter-increment:p; font-size:.87rem; color:#54606b; line-height:1.55; }
.mch-cp-via ol li::before{ content:counter(p); position:absolute; left:0; top:8px; width:27px; height:27px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; font-size:.8rem; font-weight:800; }
.mch-cp-via ol li b{ display:block; color:var(--brand-dark); font-size:.94rem; margin-bottom:2px; }
.mch-cp-via-b ol li::before{ background:#c9600f; }
.mch-cp .mch-cp-via-b .mch-cp-via-cab h3{ color:#8c4315; }
.mch-cp-promesa{ margin:18px 0 0; background:#eefaf0; border:1px solid #c9e9cf; border-radius:10px; padding:14px 18px; font-size:.92rem; color:#255c2c; font-weight:600; }
.mch-cp-promesa b{ color:#17421c; }

/* opiniones */
.mch-cp-opi{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px 22px; box-shadow:0 2px 10px rgba(15,45,75,.06); }
.mch-cp-arriba{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.mch-cp-av{ width:44px; height:44px; flex:none; border-radius:50%; background:#dceaf5; color:var(--brand-dark); font-weight:800; font-size:1.05rem; display:flex; align-items:center; justify-content:center; }
.mch-cp-quien b{ display:block; font-size:.95rem; color:var(--txt); }
.mch-cp-quien span{ font-size:.8rem; color:var(--muted); }
.mch-cp-est{ margin-left:auto; color:#f0a92b; font-size:1rem; letter-spacing:2px; }
.mch-cp-opi p{ margin:14px 0 0; color:#33465a; }
.mch-cp .mch-cp-todas{ margin:14px 0 0; }
.mch-cp .mch-cp-todas a{ font-weight:800; text-decoration:none; }

/* preguntas */
.mch-cp-faq details{ background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); margin:0 0 10px; }
.mch-cp-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-cp-faq summary::-webkit-details-marker{ display:none; }
.mch-cp-faq summary::after{ content:"+"; color:var(--brand); font-size:20px; line-height:1; }
.mch-cp-faq details[open] summary::after{ content:"−"; }
.mch-cp-faq details p{ padding:0 18px 16px; margin:0; color:var(--txt2); }

/* ---------- las chapas dibujadas (hasta que haya fotos) ---------- */
.mch-cp-ch{ --s:110px; --c1:#3a8fd0; --c2:#004776; --t:#fff; width:var(--s); height:var(--s); border-radius:50%; flex:none;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; position:relative;
  background:radial-gradient(circle at 35% 30%,var(--c1),var(--c2)); color:var(--t); overflow:hidden;
  box-shadow:0 1px 2px rgba(0,15,30,.35),0 8px 16px rgba(0,15,30,.22);
  font-size:calc(var(--s) * .14); line-height:1.05; padding:calc(var(--s) * .13); font-weight:600; }
.mch-cp-ch::after{ content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.6),rgba(255,255,255,0) 40%); }
.mch-cp-ch small{ font-size:.62em; font-weight:600; opacity:.9; margin-top:.25em; }
.mch-cp-img{ background-size:cover; background-position:center; }
.mch-cp-img::after{ display:none; }
.mch-cp-foto{ background:radial-gradient(circle at 68% 30%,#ffe08a 0 11%,transparent 12%),radial-gradient(ellipse 70% 45% at 25% 100%,#3f9656 0 60%,transparent 61%),radial-gradient(ellipse 80% 50% at 85% 104%,#2e7a43 0 60%,transparent 61%),linear-gradient(#7cc6f5,#d9f0ff); color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.45); }
.mch-cp-f-pac{ font-family:"MchPacifico",cursive; font-weight:400; }
.mch-cp-f-beb{ font-family:"MchBebas",sans-serif; font-weight:400; letter-spacing:.02em; }
.mch-cp-f-cav{ font-family:"MchCaveat",cursive; font-weight:700; }
.mch-cp-logo{ width:.9em; height:.9em; border:.14em solid currentColor; border-radius:.2em; transform:rotate(45deg); margin-bottom:.35em; }