/**
 * Llaveros para equipos.
 *
 * Todo va con el prefijo .mch-eq- porque esta página convive con el tema y con
 * el resto de módulos, y una clase suelta como .hero o .calc se pisaría con
 * cualquier cosa del tema padre.
 */
.mch-eq{
  --mch-brand:#0068ae;
  --mch-brand-dark:#004776;
  --mch-brand-deep:#00365a;
  --mch-line:#e8eef4;
  --mch-muted:#7a8794;
  --mch-verde:#1f7a44;
  --mch-verde-claro:#e7f4ec;
  color:#20303f;
}
.mch-eq *{ box-sizing:border-box; }
.mch-eq h1,.mch-eq h2,.mch-eq h3{ letter-spacing:-.02em; }
.mch-eq-caja{ width:100%; max-width:1100px; margin:0 auto; padding:0 20px; }

/* ---------- cabecera con la calculadora ---------- */
.mch-eq-hero{
  background:linear-gradient(160deg,#00365a,#0068ae);
  color:#fff; padding:46px 0 40px; text-align:center;
}
.mch-eq .mch-eq-hero h1{ margin:0 0 8px; font-size:2.1rem; color:#fff; text-wrap:balance; }
/* Solo el párrafo suelto de la cabecera, NO los que hay dentro de la
   calculadora: si esto fuese ".mch-eq-hero p" se llevaría por delante el color
   de la pregunta y del texto del mínimo, que van sobre fondo blanco. */
.mch-eq .mch-eq-hero > .mch-eq-caja > p{ margin:0 auto; max-width:56ch; color:#cfe4f4; font-size:1.02rem; text-wrap:balance; }

/* Rejilla de tres columnas: la caja del presupuesto queda centrada en la página
   y el llavero se apoya a su derecha sin descentrarla. */
.mch-eq-par{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; margin:30px 0 0; }
.mch-eq-calc{
  grid-column:2; grid-row:1; width:100%; max-width:520px;
  background:#fff; color:#20303f; border-radius:16px; padding:26px 24px;
  box-shadow:0 10px 30px rgba(0,20,40,.28);
}
.mch-eq-llavero{
  grid-column:3; grid-row:1; justify-self:start; margin-left:36px;
  width:240px; height:auto; filter:drop-shadow(0 14px 26px rgba(0,15,35,.45));
}
/* Todo lo de dentro de la caja lleva ".mch-eq" delante para ganarle al tema,
   que impone su propio ancho, su radio y su tipo a cualquier input y button. */
.mch-eq .mch-eq-pregunta{ font-size:1.15rem; font-weight:800; margin:0 0 6px; color:var(--mch-brand-deep); }
.mch-eq .mch-eq-desde{ font-size:.84rem; color:var(--mch-muted); margin:0 0 16px; }
.mch-eq .mch-eq-stepper{ display:flex; align-items:center; justify-content:center; gap:14px; }
.mch-eq .mch-eq-stepper button{
  width:52px; height:52px; min-width:0; flex:0 0 auto; padding:0;
  border-radius:50%; border:1px solid #c8d3dc; background:#f4f8fb;
  font-size:1.6rem; font-weight:700; color:var(--mch-brand-dark); cursor:pointer; line-height:1;
  box-shadow:none; text-transform:none;
}
.mch-eq .mch-eq-stepper button:hover{ background:#e4eef6; color:var(--mch-brand-dark); }
.mch-eq .mch-eq-stepper input[type=number]{
  width:110px; max-width:110px; flex:0 0 auto;
  height:66px; text-align:center; font-size:2.2rem; font-weight:800;
  border:2px solid var(--mch-brand); border-radius:12px; color:var(--mch-brand-deep); padding:0;
  appearance:textfield; -moz-appearance:textfield; box-shadow:none; background:#fff;
}
/* Fuera las flechitas del navegador: para eso están los botones de los lados. */
.mch-eq .mch-eq-stepper input::-webkit-outer-spin-button,
.mch-eq .mch-eq-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
/* La casilla de «aún no sé cuántos» va centrada bajo el contador, y el contador
   se apaga al marcarla: si no, se queda pidiendo un número que la persona no
   tiene. */
.mch-eq .mch-eq-marca-centro{ justify-content:center; margin:16px 0 0; }
.mch-eq .mch-eq-stepper.apagado{ opacity:.45; pointer-events:none; }
.mch-eq .mch-eq-resultado{ margin:22px 0 0; padding:18px 0 0; border-top:1px dashed #d5dfe7; }
.mch-eq .mch-eq-total{ font-size:2.4rem; font-weight:800; color:var(--mch-verde); line-height:1.1; }
.mch-eq .mch-eq-desglose{ font-size:.9rem; color:var(--mch-muted); margin:6px 0 0; }
.mch-eq .mch-eq-incluido{
  display:inline-block; margin:14px 0 0; font-size:.84rem; font-weight:700;
  background:var(--mch-verde-claro); color:var(--mch-verde); border-radius:999px; padding:5px 14px;
}

/* ---------- cómo es el llavero ---------- */
.mch-eq-producto{ padding:40px 0 34px; background:#fff; }
.mch-eq-producto .mch-eq-marco{ display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; }
.mch-eq-producto figure{ margin:0; }
.mch-eq-producto img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow:0 6px 20px rgba(15,45,75,.18); }
.mch-eq-producto figcaption{ margin:8px 0 0; font-size:.8rem; color:var(--mch-muted); }
.mch-eq-producto h2{ margin:0 0 6px; font-size:1.35rem; color:var(--mch-brand-deep); }
.mch-eq-producto p{ margin:0 0 18px; color:#54636f; }
.mch-eq-ficha{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; }
.mch-eq-ficha li{ border-top:1px solid var(--mch-line); padding:10px 0 0; }
.mch-eq-ficha b{ display:block; font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; color:var(--mch-muted); }
.mch-eq-ficha span{ font-size:.95rem; color:#20303f; font-weight:600; }

/* ---------- formulario ---------- */
.mch-eq-bajo{ padding:38px 0 46px; background:#fff; }
.mch-eq-bajo h2{ margin:0 0 6px; font-size:1.35rem; color:var(--mch-brand-deep); }
.mch-eq-sub{ margin:0 0 24px; color:#54636f; }
.mch-eq-campo{ margin:0 0 16px; }
.mch-eq-rejilla2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
/* El tema alinea a la derecha las etiquetas de sus formularios (viene de la
   rejilla de dos columnas del classic). Aquí van encima del campo, así que
   pegadas a la izquierda es donde se leen. */
.mch-eq label{ display:block; text-align:left; font-size:.85rem; font-weight:700; color:#3d4e5c; margin:0 0 6px; }
.mch-eq label .mch-eq-opc{ font-weight:400; color:var(--mch-muted); }
.mch-eq label.mch-eq-marca{
  display:flex; align-items:center; gap:8px; margin:8px 0 0;
  font-weight:600; font-size:.85rem; color:#3d4e5c; cursor:pointer;
}
.mch-eq label.mch-eq-marca input{ width:18px; height:18px; accent-color:var(--mch-brand); cursor:pointer; }
.mch-eq input[type=text],
.mch-eq input[type=email],
.mch-eq input[type=date],
.mch-eq input[type=number]{
  width:100%; height:46px; padding:0 14px; border:1px solid #c8d3dc; border-radius:9px;
  background:#fff; color:#20303f; font:inherit;
}
.mch-eq input[type=date]:disabled{ background:#f2f5f8; color:#9aa7b2; }
.mch-eq textarea{
  width:100%; padding:12px 14px; border:1px solid #c8d3dc; border-radius:9px; background:#fff;
  color:#20303f; resize:vertical; line-height:1.7; font:inherit;
}
.mch-eq input:focus,.mch-eq textarea:focus{ outline:2px solid var(--mch-brand); outline-offset:1px; border-color:var(--mch-brand); }
.mch-eq .mch-eq-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:52px; padding:0 26px; border:0; border-radius:999px; cursor:pointer;
  background:var(--mch-brand); color:#fff; font-weight:800; font-size:1.02rem;
  box-shadow:0 3px 10px rgba(0,104,174,.28);
}
.mch-eq .mch-eq-cta:hover{ background:var(--mch-brand-dark); color:#fff; }
/* El botón y la nota que lo acompaña, centrados: es el final del formulario y
   la única acción de la página. */
/* width:fit-content es lo que hace el centrado: un botón en bloque con ancho
   automático no se mueve con margin:auto, porque su ancho ya es el del texto. */
.mch-eq .mch-eq-form > .mch-eq-cta{ display:flex; width:-moz-fit-content; width:fit-content; margin:0 auto; }
/* Los 18px son los mismos que deja debajo la zona de adjuntos: así el botón
   queda con el mismo aire arriba y abajo. */
.mch-eq-nota{ font-size:.82rem; color:var(--mch-muted); margin:18px 0 0; text-align:center; }
.mch-eq-errores{
  background:#fdf4f4; border:1px solid #e8cccc; border-radius:10px; padding:12px 16px; margin:0 0 18px;
  color:#8d3232; font-size:.9rem;
}
.mch-eq-errores ul{ margin:0; padding-left:18px; }

/* El campo trampa se saca de la pantalla, no se oculta con display:none: los
   robots saltan lo que está oculto y aquí queremos que lo rellenen. */
.mch-eq-trampa{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ---------- adjuntos ---------- */
.mch-eq-adj{ margin:0 0 18px; }
.mch-eq .mch-eq-zona{
  display:block; border:2px dashed #bcd2e2; border-radius:12px; background:#fbfdff;
  padding:18px; text-align:center; color:#48596a; font-size:.9rem; cursor:pointer; font-weight:400;
  transition:border-color .15s ease, background .15s ease;
}
.mch-eq-zona:hover,.mch-eq-zona.encima{ border-color:var(--mch-brand); background:#f2f8fc; }
.mch-eq-zona b{ display:block; color:var(--mch-brand-dark); margin:0 0 2px; }
.mch-eq-zona.llena{ border-style:solid; border-color:#dbe4ec; background:#f7fafc; color:var(--mch-muted); cursor:not-allowed; }
.mch-eq-adj ul{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px; }
.mch-eq-adj li{
  display:flex; align-items:center; gap:12px; background:#f4f8fb;
  border:1px solid var(--mch-line); border-radius:10px; padding:8px 10px;
}
.mch-eq-adj li img{ width:44px; height:44px; object-fit:cover; border-radius:7px; background:#dde6ee; flex:0 0 auto; }
.mch-eq-adj li .txt{ min-width:0; flex:1; }
.mch-eq-adj li .txt b{ display:block; font-size:.86rem; font-weight:600; color:#20303f; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mch-eq-adj li .txt span{ font-size:.78rem; color:var(--mch-muted); }
.mch-eq .mch-eq-adj li button{
  width:30px; height:30px; flex:0 0 auto; border-radius:7px; border:1px solid #e2c9c9;
  background:#fdf4f4; color:#a34141; cursor:pointer; font-weight:700; line-height:1;
}
.mch-eq-cuenta{ font-size:.8rem; color:var(--mch-muted); margin:8px 0 0; }
.mch-eq-cuenta.tope{ color:#a3620c; background:#fdf3e0; border-radius:8px; padding:8px 12px; }

/* ---------- mensaje de después de enviar ---------- */
.mch-eq-marco-gracias{
  background:var(--mch-verde-claro); border:1px solid #bfe0cd; border-radius:16px;
  padding:30px 28px; text-align:center;
}
.mch-eq-tic{
  width:56px; height:56px; margin:0 auto 14px; border-radius:50%; background:var(--mch-verde);
  color:#fff; font-size:1.7rem; display:flex; align-items:center; justify-content:center;
}
.mch-eq-gracias h2{ margin:0 0 8px; font-size:1.35rem; color:#155c33; }
/* Sin tope de ancho: el que había (60ch) partía las frases en tres líneas
   cortas dejando media caja vacía. Que use el ancho de la caja y corte donde
   toque. */
.mch-eq-gracias p{ margin:0 auto 10px; color:#2c5744; text-wrap:pretty; }
.mch-eq-resumen{
  margin:20px auto 0; max-width:420px; background:#fff; border-radius:12px; padding:14px 18px;
  text-align:left; font-size:.9rem; color:#3d4e5c;
}
.mch-eq-resumen div{ display:flex; justify-content:space-between; gap:14px; padding:5px 0; }
.mch-eq-resumen div + div{ border-top:1px solid #eef3f7; }

/* ---------- opiniones ---------- */
.mch-eq-voz{ background:#f2f6f9; border-top:1px solid var(--mch-line); padding:34px 0 44px; }
.mch-eq-opiniones{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; }
.mch-eq-opiniones h3{
  grid-column:1/-1; margin:0; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--mch-muted); text-align:center;
}
.mch-eq-opinion{
  background:#fff; border:1px solid var(--mch-line); border-radius:14px;
  padding:20px 22px; box-shadow:0 2px 10px rgba(15,45,75,.06);
}
.mch-eq-arriba{ display:flex; align-items:center; gap:12px; }
.mch-eq-avatar{
  width:44px; height:44px; flex:0 0 auto; border-radius:50%; background:#dceaf5;
  color:var(--mch-brand-dark); font-weight:800; font-size:1.05rem;
  display:flex; align-items:center; justify-content:center;
}
.mch-eq-quien b{ display:block; font-size:.95rem; color:#20303f; }
.mch-eq-quien span{ font-size:.8rem; color:var(--mch-muted); }
.mch-eq-estrellas{ margin-left:auto; color:#f0a92b; font-size:1rem; letter-spacing:2px; }
.mch-eq-opinion p{ margin:14px 0 0; color:#33465a; }

/* ---------- móvil ---------- */
@media (max-width:767px){
  .mch-eq-hero h1{ font-size:1.5rem; }
  .mch-eq .mch-eq-par{ grid-template-columns:1fr; gap:22px; }
  .mch-eq .mch-eq-calc{ grid-column:1; grid-row:auto; }
  .mch-eq .mch-eq-llavero{ grid-column:1; grid-row:auto; justify-self:center; margin-left:0; width:160px; }
  .mch-eq .mch-eq-stepper input[type=number]{ width:88px; height:58px; font-size:1.7rem; }
  .mch-eq-producto .mch-eq-marco{ grid-template-columns:1fr; gap:22px; }
  .mch-eq-rejilla2{ grid-template-columns:1fr; }
  .mch-eq-opiniones{ grid-template-columns:1fr; }
  .mch-eq-estrellas{ margin-left:0; }
  .mch-eq-arriba{ flex-wrap:wrap; }
  .mch-eq .mch-eq-cta{ width:100%; }
}