/**
 * Las landings de temática (/chapas-halloween, /chapas-navidad...). Salen del boceto A de
 * bocetos/pagina-chapas-halloween-8-opciones.html, que copia las piezas de
 * custom.css y de personalizadas.css (la página hermana).
 *
 * Todo con el prefijo .mch-tem- 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, no según el de la ventana: así se comporta igual dentro del marco del
 * boceto y en la web.
 */
.mch-tem{
  --brand:#0068ae; --brand-dark:#004776; --brand-deep:#00365a; --accent:#f2701b;
  --line:#e8eef4; --line2:#cddced; --muted:#7a8794; --txt:#20303f; --txt2:#54636f;
  --shadow:0 3px 12px rgba(15,45,75,.10);
  /* la noche de Halloween: el naranja es el de la casa, el morado es de aquí */
  --hw-noche:linear-gradient(115deg,#1b1026 0%,#3b2258 55%,#6a3d99 100%);
  container-type:inline-size;
  color:var(--txt); padding-bottom:10px;
}
.mch-tem *{ box-sizing:border-box; }
.mch-tem h1,.mch-tem h2,.mch-tem h3{ letter-spacing:-.02em; }
.mch-tem a{ color:var(--brand); }
.mch-tem a:hover{ text-decoration:none; }
.mch-tem p{ margin:0 0 12px; text-wrap:pretty; }

/* ---------- botones ---------- */
.mch-tem-botones{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.mch-tem .mch-tem-b-cta{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:800; font-size:.95rem; padding:14px 26px; border-radius:8px; border:0; background:var(--accent); color:#fff; box-shadow:0 4px 14px rgba(242,112,27,.34); transition:.16s; }
.mch-tem .mch-tem-b-linea{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:800; font-size:.95rem; padding:12px 24px; border-radius:8px; background:transparent; color:#fff; border:2px solid rgba(255,255,255,.70); }
.mch-tem .mch-tem-b-cta:hover,.mch-tem .mch-tem-b-linea:hover{ color:#fff; transform:translateY(-1px); }
.mch-tem .mch-tem-b-cont{ display:inline-block; border:2px solid var(--brand); border-radius:6px; padding:6px 12px; color:var(--brand-dark); font-weight:700; font-size:.82rem; background:#fff; margin-top:auto; }

/* los dos caminos de la cabecera: la imagen propia primero, las plantillas después */
.mch-tem-caminos{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(210px,290px)); margin:4px 0 0; }
.mch-tem .mch-tem-camino{ display:flex; flex-direction:column; gap:4px; text-decoration:none; border-radius:10px; padding:14px 16px; transition:.16s; }
.mch-tem .mch-tem-camino:hover{ transform:translateY(-1px); color:#fff; }
.mch-tem-camino-t{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:1rem; }
.mch-tem-camino-t svg{ width:18px; height:18px; flex:none; }
.mch-tem-camino-d{ font-size:.84rem; line-height:1.35; }
.mch-tem .mch-tem-camino-uno{ background:var(--accent); color:#fff; box-shadow:0 4px 14px rgba(242,112,27,.34); }
.mch-tem-camino-uno .mch-tem-camino-d{ color:rgba(255,255,255,.92); }
.mch-tem .mch-tem-camino-dos{ background:rgba(255,255,255,.10); border:2px solid rgba(255,255,255,.55); color:#fff; }
.mch-tem-camino-dos .mch-tem-camino-d{ color:rgba(255,255,255,.80); }

/* ---------- la chapa: el SVG de la plantilla de verdad ---------- */
.mch-tem-ch{ display:block; width:var(--s,120px); height:var(--s,120px); flex:none; border-radius:50%; background:#fff;
  box-shadow:0 1px 2px rgba(0,15,30,.35),0 8px 16px rgba(0,15,30,.22); }
.mch-tem-ch img{ display:block; width:100%; height:100%; border-radius:50%; }

/* ---------- cabecera ---------- */
.mch-tem-hero{ background:var(--hero,var(--hw-noche)); color:#fff; border-radius:12px; padding:clamp(24px,3.4cqw,40px); display:grid; gap:26px; align-items:center; }
@container (min-width:900px){ .mch-tem-hero{ grid-template-columns:minmax(260px,1fr) minmax(280px,520px); } }
.mch-tem .mch-tem-hero h1{ margin:8px 0 12px; font-size:clamp(1.7rem,3.4cqw,2.3rem); line-height:1.13; font-weight:800; color:#fff; }
.mch-tem-hero p{ color:rgba(255,255,255,.88); }
/* confeti encima del degradado, para las temáticas que lo piden (hero_confeti) */
.mch-tem-hero.con-confeti{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg opacity='.75'%3E%3Ccircle cx='66' cy='33' r='2.6' fill='%23ffd23f'/%3E%3Crect x='13' y='162' width='9' height='3.6' rx='1.5' fill='%23ff6b8a' transform='rotate%2824 13 162%29'/%3E%3Crect x='74' y='15' width='9' height='3.6' rx='1.5' fill='%235bc0eb' transform='rotate%28129 74 15%29'/%3E%3Ccircle cx='45' cy='21' r='2.6' fill='%23ffffff'/%3E%3Crect x='17' y='21' width='9' height='3.6' rx='1.5' fill='%23f2701b' transform='rotate%28108 17 21%29'/%3E%3Crect x='15' y='113' width='9' height='3.6' rx='1.5' fill='%23b388ff' transform='rotate%2857 15 113%29'/%3E%3Ccircle cx='125' cy='116' r='2.6' fill='%23ffd23f'/%3E%3Crect x='115' y='80' width='9' height='3.6' rx='1.5' fill='%23ff6b8a' transform='rotate%2856 115 80%29'/%3E%3Crect x='13' y='169' width='9' height='3.6' rx='1.5' fill='%235bc0eb' transform='rotate%2874 13 169%29'/%3E%3Ccircle cx='84' cy='108' r='2.6' fill='%23ffffff'/%3E%3Crect x='63' y='161' width='9' height='3.6' rx='1.5' fill='%23f2701b' transform='rotate%2846 63 161%29'/%3E%3Crect x='24' y='114' width='9' height='3.6' rx='1.5' fill='%23b388ff' transform='rotate%2848 24 114%29'/%3E%3Ccircle cx='76' cy='109' r='2.6' fill='%23ffd23f'/%3E%3Crect x='112' y='123' width='9' height='3.6' rx='1.5' fill='%23ff6b8a' transform='rotate%28127 112 123%29'/%3E%3Crect x='135' y='86' width='9' height='3.6' rx='1.5' fill='%235bc0eb' transform='rotate%2880 135 86%29'/%3E%3Ccircle cx='93' cy='181' r='2.6' fill='%23ffffff'/%3E%3Crect x='62' y='157' width='9' height='3.6' rx='1.5' fill='%23f2701b' transform='rotate%28178 62 157%29'/%3E%3Crect x='154' y='20' width='9' height='3.6' rx='1.5' fill='%23b388ff' transform='rotate%2876 154 20%29'/%3E%3Ccircle cx='105' cy='172' r='2.6' fill='%23ffd23f'/%3E%3Crect x='59' y='192' width='9' height='3.6' rx='1.5' fill='%23ff6b8a' transform='rotate%2830 59 192%29'/%3E%3Crect x='102' y='36' width='9' height='3.6' rx='1.5' fill='%235bc0eb' transform='rotate%2887 102 36%29'/%3E%3Ccircle cx='33' cy='98' r='2.6' fill='%23ffffff'/%3E%3Crect x='189' y='19' width='9' height='3.6' rx='1.5' fill='%23f2701b' transform='rotate%28142 189 19%29'/%3E%3Crect x='114' y='172' width='9' height='3.6' rx='1.5' fill='%23b388ff' transform='rotate%2880 114 172%29'/%3E%3Ccircle cx='69' cy='71' r='2.6' fill='%23ffd23f'/%3E%3Crect x='115' y='92' width='9' height='3.6' rx='1.5' fill='%23ff6b8a' transform='rotate%2823 115 92%29'/%3E%3C/g%3E%3C/svg%3E") 0 0/200px 200px repeat,var(--hero,var(--hw-noche)); }
.mch-tem-kicker{ font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--hero-tinte,#e0b8ff); }
.mch-tem-desde{ display:block; font-size:.82rem; color:var(--hero-tinte,#cbb0e8); margin-top:12px; font-weight:600; }
.mch-tem-muro{ display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:10px; max-height:270px; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 100%); mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 100%); }
.mch-tem-muro .mch-tem-ch{ --s:100%; width:100%; height:auto; aspect-ratio:1; }

/* ---------- secciones ---------- */
.mch-tem-bloque{ padding:40px 0 0; scroll-margin-top:70px; }
.mch-tem-sec{ margin:0 0 22px; }
.mch-tem .mch-tem-sec 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-tem-sec h2::after{ content:""; position:absolute; left:0; bottom:-2px; width:100%; height:2px; background:var(--brand); }
.mch-tem-sec p{ margin:12px 0 0; color:var(--txt2); }
.mch-tem .mch-tem-cada-una{ margin:14px 0 0; background:#f2f8fc; border:1px solid #cfe3f2; border-radius:10px; padding:14px 18px; font-size:.95rem; color:#25404f; }
.mch-tem .mch-tem-cada-una b{ color:var(--brand-dark); }
.mch-tem .mch-tem-nota{ margin:12px 0 0; font-size:.85rem; color:var(--muted); }

/* la rejilla de plantillas */
.mch-tem-rejilla{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
@container (max-width:560px){ .mch-tem-rejilla{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.mch-tem .mch-tem-tpl{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; text-decoration:none;
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:16px 14px 14px; transition:.16s; }
.mch-tem .mch-tem-tpl:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(15,45,75,.16); }
.mch-tem .mch-tem-tpl b{ font-size:.88rem; color:var(--brand-dark); line-height:1.25; }
.mch-tem-cargando{ color:var(--muted); font-size:.9rem; }

/* el texto largo, en tarjetas sueltas: llena el ancho sin líneas kilométricas y
   los tres párrafos empiezan a la misma altura (con columnas, el segundo caía
   más abajo porque el texto fluía de una columna a otra) */
.mch-tem-texto{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.mch-tem .mch-tem-texto p{ margin:0; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:clamp(16px,2cqw,24px); }

/* precios */
.mch-tem-precios{ display:grid; gap:12px; grid-template-columns:minmax(0,1fr); }
@container (min-width:760px){ .mch-tem-precios{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.mch-tem-pr{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fff; border:1px solid #dbe9f4; border-radius:10px; padding:12px 14px; }
.mch-tem-rg{ font-weight:700; color:#16212e; }
.mch-tem-ah{ display:block; font-size:.75rem; font-weight:700; color:var(--brand); }
.mch-tem-eu{ font-size:1.3rem; font-weight:800; white-space:nowrap; color:#16212e; }
.mch-tem-eu span{ font-size:.78rem; font-weight:400; color:var(--muted); }

/* pasos */
.mch-tem-pasos{ counter-reset:p; display:grid; gap:14px; grid-template-columns:minmax(0,1fr); }
@container (min-width:760px){ .mch-tem-pasos{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.mch-tem-paso{ background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:16px 18px; counter-increment:p; }
.mch-tem-paso::before{ content:counter(p); display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--brand); color:#fff; font-weight:800; font-size:.85rem; margin-bottom:9px; }
.mch-tem-paso b{ display:block; color:var(--brand-dark); margin-bottom:3px; }
.mch-tem-paso span{ font-size:.86rem; color:var(--txt2); }
.mch-tem .mch-tem-promesa{ margin:26px 0 0; background:#eefaf0; border:1px solid #c9e9cf; border-radius:10px; padding:14px 18px; font-size:.92rem; color:#255c2c; font-weight:600; }

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