/* Módulo «Puertas» 2027 · v1.0.1 · 2026-09-26 (antes 1.0.0 · 2026-09-24)
   1.0.1: la cinta («CALENDARIO») va con el texto, debajo del nombre, nunca encima de la foto.
   Maqueta: Welcome 2027/maqueta-puertas-2027.html
   «Círculo» en fila de 5 es la puerta de siempre (wti-puertas-2027-1.5.0.css).
   Todo prefijado con .pu27 para ganarle al kit de Elementor.
   Regla de la casa: cada cambio = nombre de archivo nuevo (WP Rocket). */

.pu27{
	--pu27-naranja:#F57C00;--pu27-marron:#7A5238;--pu27-tinta:#1B1512;--pu27-gris:#8A817B;--pu27-linea:#E8E2DA;
	--pu27-hueco:18px;
	padding:16px 22px 14px;
	box-sizing:border-box;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
.pu27 *{box-sizing:border-box}
.pu27.pu27--crema{background:var(--wti-crema-fondo,#FBF7F2);padding-top:26px;padding-bottom:24px}
.pu27 .pu27-dentro{max-width:1280px;margin:0 auto}
.pu27 .pu27-cabeza{margin-bottom:18px}

/* ---------- Reparto ---------- */
.pu27--fila .pu27-lista{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--pu27-hueco)}
.pu27--fila .pu27-puerta{flex:0 0 calc((100% - (var(--pu27-n) - 1) * var(--pu27-hueco)) / var(--pu27-n));max-width:calc((100% - (var(--pu27-n) - 1) * var(--pu27-hueco)) / var(--pu27-n))}
.pu27--rejilla .pu27-lista{display:grid;grid-template-columns:repeat(var(--pu27-n),minmax(0,1fr));gap:var(--pu27-hueco)}
.pu27--tira .pu27-lista{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 2px 8px;-webkit-overflow-scrolling:touch}
.pu27--tira .pu27-lista::-webkit-scrollbar{display:none}
.pu27--tira .pu27-puerta{flex:0 0 calc((100% - (var(--pu27-n) - 1) * 16px) / var(--pu27-n));scroll-snap-align:start}

/* ---------- La puerta ---------- */
.pu27 .pu27-puerta{position:relative;display:block;text-decoration:none;color:inherit;text-align:center;min-width:0}
.pu27 .pu27-foto{position:relative;display:block;overflow:hidden;background:#F3EFEA}
.pu27 .pu27-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.pu27 .pu27-puerta:hover .pu27-foto img{transform:scale(1.05)}
.pu27 .pu27-texto{display:block}
.pu27 .pu27-nombre{display:block;font-family:"Oswald",sans-serif;font-weight:500;font-size:18px;line-height:1.15;letter-spacing:.02em;text-transform:uppercase;color:var(--pu27-tinta);transition:color .2s}
.pu27 .pu27-puerta:hover .pu27-nombre{color:var(--pu27-naranja)}
.pu27 .pu27-lema{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:var(--pu27-gris)}
.pu27 .pu27-cinta{position:absolute;z-index:2;padding:4px 14px;border-radius:999px;background:var(--pu27-naranja);color:#fff;white-space:nowrap;font-family:"Oswald",sans-serif;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 4px 12px -4px rgba(27,21,18,.45);pointer-events:none}
.pu27--sin-lema .pu27-lema,.pu27--sin-cinta .pu27-cinta{display:none}
/* 1.0.1 · la cinta en el texto: pastilla pequeña debajo del nombre y el lema */
.pu27 .pu27-texto .pu27-cinta{position:static;display:inline-block;margin-top:8px;padding:3px 10px;font-size:10.5px;letter-spacing:.1em;transform:none;box-shadow:none}

/* Círculo — el de siempre */
.pu27--circulo .pu27-foto{aspect-ratio:1/1;width:100%;max-width:var(--pu27-tam);border-radius:50%;margin:0 auto 12px;box-shadow:0 10px 24px -16px rgba(27,21,18,.55)}
.pu27--circulo .pu27-nombre{color:var(--pu27-naranja)}
.pu27--circulo .pu27-puerta:hover .pu27-nombre{color:var(--pu27-marron)}

/* Tarjeta */
.pu27--tarjeta .pu27-puerta{background:#fff;border:1px solid var(--pu27-linea);border-radius:14px;padding:12px;text-align:left;transition:transform .25s,box-shadow .25s}
.pu27--tarjeta .pu27-puerta:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(27,21,18,.1)}
.pu27--tarjeta .pu27-foto{aspect-ratio:var(--pu27-prop);border-radius:10px;margin-bottom:10px}

/* Foto con el nombre encima */
.pu27--foto .pu27-puerta{border-radius:14px;overflow:hidden;text-align:left}
.pu27--foto .pu27-foto{aspect-ratio:var(--pu27-prop)}
.pu27--foto .pu27-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,21,18,0) 35%,rgba(27,21,18,.78))}
.pu27--foto .pu27-texto{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 14px 13px}
.pu27--foto .pu27-nombre,.pu27--foto .pu27-puerta:hover .pu27-nombre{color:#fff;font-size:21px}
.pu27--foto .pu27-lema{color:rgba(255,255,255,.85)}

/* Pastilla: foto pequeña y nombre al lado */
.pu27--pastilla .pu27-puerta{display:flex;align-items:center;gap:12px;text-align:left;background:#fff;border:1px solid var(--pu27-linea);border-radius:99px;padding:6px 18px 6px 6px;transition:border-color .2s,box-shadow .2s}
.pu27--pastilla .pu27-puerta:hover{border-color:var(--pu27-naranja);box-shadow:0 8px 20px -12px rgba(245,124,0,.6)}
.pu27--pastilla .pu27-foto{flex:none;width:calc(var(--pu27-tam) * .4);aspect-ratio:1/1;border-radius:50%}
.pu27--pastilla .pu27-nombre{font-size:16px}
.pu27--pastilla .pu27-lema{font-size:12px}
.pu27--pastilla .pu27-cinta{position:static;margin-left:auto;padding:3px 9px;font-size:10px;box-shadow:none}

/* Solo texto: botones */
.pu27--texto .pu27-puerta{background:var(--pu27-tinta);border-radius:14px;padding:18px 18px 16px;text-align:left;transition:background .2s,transform .2s}
.pu27--texto .pu27-puerta:hover{background:var(--pu27-naranja);transform:translateY(-2px)}
.pu27--texto .pu27-nombre,.pu27--texto .pu27-puerta:hover .pu27-nombre{color:#fff;display:flex;justify-content:space-between;gap:8px}
.pu27--texto .pu27-nombre::after{content:"→";font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.pu27--texto .pu27-lema{color:rgba(255,255,255,.7)}
.pu27--texto .pu27-cinta{right:12px;top:-9px;padding:3px 10px}

/* ---------- Tableta ---------- */
@media (max-width:1024px){
	.pu27{padding:20px 18px 18px;--pu27-hueco:14px}
	.pu27--fila .pu27-puerta{flex-basis:calc((100% - 2 * 14px) / 3);max-width:calc((100% - 2 * 14px) / 3)}
	.pu27--rejilla .pu27-lista{grid-template-columns:repeat(3,minmax(0,1fr))}
	.pu27 .pu27-nombre{font-size:17px}
}

/* ---------- Móvil: tira que se desliza o parrilla ---------- */
@media (max-width:640px){
	.pu27{padding:18px 0 14px}
	.pu27.pu27--crema{padding:22px 0 18px}
	.pu27 .pu27-cabeza{padding:0 16px}
	.pu27--m-tira .pu27-lista{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px 6px;scroll-padding-left:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
	.pu27--m-tira .pu27-lista::-webkit-scrollbar{display:none}
	.pu27--m-tira .pu27-puerta{flex:0 0 calc((100% - (var(--pu27-nm) - 1) * 12px) / var(--pu27-nm));max-width:none;scroll-snap-align:start}
	.pu27--m-rejilla .pu27-lista{display:grid;grid-template-columns:repeat(var(--pu27-nm),minmax(0,1fr));gap:12px;padding:0 16px}
	.pu27--m-rejilla .pu27-puerta{max-width:none}
	.pu27 .pu27-nombre{font-size:16px}
	.pu27--pastilla.pu27--m-rejilla .pu27-lista{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
	.pu27 .pu27-foto img,.pu27 .pu27-puerta{transition:none}
}