/* Módulo «Menú» 2027 · v1.0.1 · 2026-09-24 (pestañas que se distinguen de la línea)
   Maqueta: Welcome 2027/maqueta-menu-2027.html
   «Línea» dentro de un Texto usa la línea de la casa (.wti-linea, de
   wti-base-2027); aquí van el bloque suelto y los demás estilos.
   Todo prefijado con .m27. Cada cambio = nombre de archivo nuevo (WP Rocket). */

.m27{padding:26px 0}
.m27.m27--dentro{padding:0;margin:4px 0 18px}
.m27 .m27-cabeza{margin-bottom:16px}
.m27 .m27-lista{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.m27 .m27-lista li{margin:0;padding:0;list-style:none}
.m27 .m27-lista a{text-decoration:none;color:var(--wti-tinta,#1B1512);transition:color .2s,background .2s,border-color .2s,padding .2s}
.m27 .m27--centro{justify-content:center}

/* Línea (la de siempre) */
.m27 .m27--linea{align-items:center;border-top:1px solid var(--wti-linea,#E8E2DA);border-bottom:2px solid var(--wti-tinta,#1B1512);padding:12px 0}
.m27 .m27--linea li+li::before{content:"";display:inline-block;width:1px;height:14px;background:var(--wti-linea,#E8E2DA);margin:0 14px;vertical-align:middle}
.m27 .m27--linea a{font:20px/1 var(--wti-botones);letter-spacing:.04em}
.m27 .m27--linea a:hover,.m27 .m27--linea a[aria-current]{color:var(--wti-naranja,#F57C00)}

/* Pastillas */
.m27 .m27--pastillas{gap:8px}
.m27 .m27--pastillas a{display:inline-flex;padding:9px 16px;border:1px solid var(--wti-linea,#E8E2DA);border-radius:99px;background:#fff;font:500 14px/1 var(--wti-titulos);text-transform:uppercase;letter-spacing:.02em}
.m27 .m27--pastillas a:hover,.m27 .m27--pastillas a[aria-current]{border-color:var(--wti-naranja,#F57C00);color:var(--wti-naranja,#F57C00)}

/* Pestañas: cada una en su caja, pegadas a una raya; la de la página en que
   se está (o la que se señala) sube, blanca y con el borde naranja arriba */
.m27 .m27--pestanas{gap:6px;align-items:flex-end;border-bottom:2px solid var(--wti-tinta,#1B1512)}
.m27 .m27--pestanas a{display:inline-block;padding:12px 18px 11px;background:var(--wti-crema,#F2E6D8);border:1px solid var(--wti-linea,#E8E2DA);border-bottom:0;border-top:3px solid transparent;border-radius:10px 10px 0 0;font:500 16px/1 var(--wti-titulos);text-transform:uppercase}
.m27 .m27--pestanas a:hover,.m27 .m27--pestanas a[aria-current]{background:#fff;border-top-color:var(--wti-naranja,#F57C00);color:var(--wti-naranja,#F57C00);padding-top:15px}

/* Botones con flecha */
.m27 .m27--botones{display:grid;grid-template-columns:repeat(var(--m27-col),minmax(0,1fr));gap:12px}
.m27 .m27--botones a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 18px;border-radius:14px;background:var(--wti-tinta,#1B1512);color:#fff;font:500 17px/1.2 var(--wti-titulos);text-transform:uppercase}
.m27 .m27--botones a::after{content:"→";font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.m27 .m27--botones a:hover,.m27 .m27--botones a[aria-current]{background:var(--wti-naranja,#F57C00);color:#fff}

/* Lista en columnas */
.m27 .m27--columnas{display:grid;grid-template-columns:repeat(var(--m27-col),minmax(0,1fr));gap:0 28px}
.m27 .m27--columnas a{display:flex;justify-content:space-between;padding:12px 2px;border-bottom:1px solid var(--wti-linea,#E8E2DA);font-size:15px}
.m27 .m27--columnas a::after{content:"›";color:var(--wti-naranja,#F57C00);font-size:18px;line-height:1}
.m27 .m27--columnas a:hover,.m27 .m27--columnas a[aria-current]{color:var(--wti-naranja,#F57C00);padding-left:8px}

/* Grande */
.m27 .m27--grande.m27--linea a{font-size:26px}
.m27 .m27--grande.m27--pastillas a{font-size:17px;padding:12px 20px}
.m27 .m27--grande.m27--pestanas a{font-size:20px}
.m27 .m27--grande.m27--botones a{font-size:21px;padding:22px}
.m27 .m27--grande.m27--columnas a{font-size:17px}

/* Móvil */
@media (max-width:767px){
	.m27{padding:20px 0}
	.m27 .m27--m-desliza.m27--linea,.m27 .m27--m-desliza.m27--pastillas,.m27 .m27--m-desliza.m27--pestanas{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
	.m27 .m27--m-desliza::-webkit-scrollbar{display:none}
	.m27 .m27--m-desliza li{flex:none}
	.m27 .m27--m-apila.m27--linea,.m27 .m27--m-apila.m27--pastillas,.m27 .m27--m-apila.m27--pestanas{flex-direction:column;align-items:flex-start;gap:8px}
	.m27 .m27--m-apila.m27--linea li+li::before{display:none}
	.m27 .m27--botones,.m27 .m27--columnas{grid-template-columns:1fr}
}
