/* MG Bloques - estilos publicos */

/* --- Servicios --- */
.mgb-servicios{width:min(1180px,92vw);margin-left:50%;transform:translateX(-50%)}
.mgb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--mgb-serv-min,250px),1fr));gap:18px}
.mgb-card{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid #EFE4DF;border-radius:8px;
padding:26px 22px 22px;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.mgb-card:hover,.mgb-card:focus-visible{transform:translateY(-4px);box-shadow:0 12px 28px rgba(34,40,43,.10);
border-color:var(--mgb-acento,#FF5252);outline:none}
.mgb-ico{width:52px;height:52px;border-radius:50%;background:var(--mgb-icono-fondo,#E8F6F1);display:flex;
align-items:center;justify-content:center;color:var(--mgb-acento,#FF5252);flex:none}
.mgb-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mgb-card h3{margin:2px 0 0;font-size:19px;line-height:1.28;color:#22282B;font-weight:600}
.mgb-card p{margin:0;font-size:15px;line-height:1.55;color:#5E6B67;flex:1}
.mgb-mas{font-size:14px;font-weight:600;color:var(--mgb-acento,#FF5252)}
.mgb-card:hover .mgb-mas{text-decoration:underline}
.mgb-pie{text-align:center;margin-top:26px}
.mgb-btn{display:inline-block;background:var(--mgb-acento,#FF5252);color:#fff;text-decoration:none;padding:14px 34px;
border-radius:6px;font-weight:600;font-size:16px;transition:filter .18s ease}
.mgb-btn:hover{filter:brightness(.92);color:#fff}

/* --- Opiniones (carrusel) --- */
.mgb-op{position:relative;width:min(1180px,92vw);margin-left:50%;transform:translateX(-50%);padding:0 46px}
.mgb-pista{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
padding:4px;margin:0;list-style:none;scrollbar-width:none}
.mgb-pista::-webkit-scrollbar{display:none}
.mgb-op-card{flex:0 0 calc((100% - (var(--mgb-visibles,3) - 1) * 18px) / var(--mgb-visibles,3));scroll-snap-align:start;background:var(--mgb-op-fondo,#fff);
border:1px solid #E4E9E8;border-radius:10px;padding:24px 22px;display:flex;flex-direction:column;gap:12px;
box-shadow:0 4px 16px rgba(34,40,43,.05)}
.mgb-comillas{font-family:Georgia,"Times New Roman",serif;font-size:38px;line-height:1;color:#8BD9C3;height:20px}
.mgb-op-texto{margin:0;font-size:15.5px;line-height:1.62;color:#3D4B46;font-style:italic;flex:1}
.mgb-op-autor{margin:0;font-size:14px;font-weight:600;color:var(--mgb-acento,#FF5252);letter-spacing:.02em}
.mgb-flecha{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;
border:1px solid #E4E9E8;background:#fff;color:#22282B;font-size:24px;line-height:1;cursor:pointer;z-index:2;
display:flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease,opacity .15s ease}
.mgb-flecha:hover{background:var(--mgb-acento,#FF5252);color:#fff;border-color:var(--mgb-acento,#FF5252)}
.mgb-flecha:focus-visible{outline:2px solid #1F6F5C;outline-offset:2px}
.mgb-flecha[disabled]{opacity:.35;cursor:default}
.mgb-flecha[disabled]:hover{background:#fff;color:#22282B;border-color:#E4E9E8}
.mgb-ant{left:0}
.mgb-sig{right:0}
.mgb-puntos{display:flex;gap:8px;justify-content:center;margin-top:20px}
.mgb-punto{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:#D6DEDB;cursor:pointer}
.mgb-punto[aria-selected="true"]{background:var(--mgb-acento,#FF5252);width:24px;border-radius:5px}
.mgb-punto:focus-visible{outline:2px solid #1F6F5C;outline-offset:2px}

@media (max-width:1000px){
	.mgb-op{--mgb-visibles:2 !important}
	.mgb-op-card{flex:0 0 calc((100% - 18px)/2)}
}
@media (max-width:700px){
	.mgb-servicios,.mgb-op{width:100%;margin-left:0;transform:none}
	.mgb-op{padding:0}
	.mgb-op-card{flex:0 0 100%}
	.mgb-flecha{display:none}
	.mgb-card{padding:22px 18px}
}

@media (prefers-reduced-motion: reduce){
	.mgb-pista{scroll-behavior:auto}
	.mgb-op-card,.mgb-card{transition:none}
}

/* El punto se sigue viendo pequeno, pero responde en una zona mucho mayor:
   con el dedo, 9px no hay quien los acierte. Los 4px laterales no llegan a
   juntar dos puntos contiguos, que van separados 8px. */
.mgb-punto{position:relative}
.mgb-punto::after{content:'';position:absolute;top:-14px;right:-4px;bottom:-14px;left:-4px}