/* =================================================================
   TELAS · categorías con overlay mínimo, texto legible
================================================================= */
.telas { background: var(--off-white); }
.telas-header { text-align: center; margin-bottom: 4rem; }
.telas-header .section-subtitle { margin: 0 auto; }
/* Título principal más grande y en negrita */
.telas #telas-title { font-size: clamp(2.6rem, 5.2vw, 4.4rem); font-weight: 700; }
.telas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.tela-card { position: relative; height: 420px; overflow: hidden; cursor: pointer; border-radius: 4px; }
.tela-card.feature { grid-column: span 1; grid-row: span 2; height: auto; min-height: 856px; }
.tela-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.8s; }
.tela-card:hover .tela-card-bg { transform: scale(1.06); }
/* Sin degradado/overlay sobre la imagen: se muestra limpia.
   La legibilidad del texto se resuelve con text-shadow, no con capas sobre la foto. */
.tela-content {
    position: absolute; bottom: 2rem; left: 2rem; right: 2rem;
    z-index: 2; color: var(--white);
    text-shadow: 0 1px 6px rgba(0,0,0,0.55), 0 0 2px rgba(0,0,0,0.5);
}
.tela-content .num { font-family: var(--serif); font-size: 0.95rem; opacity: 0.9; letter-spacing: 0.2em; }
.tela-content h3 { font-size: 2rem; margin: 0.3rem 0 0; color: var(--white); font-weight: 600; }

/* Responsive — telas */
@media (max-width: 1024px) {
    .telas-grid { grid-template-columns: repeat(2, 1fr); }
    .tela-card.feature { grid-column: span 2; grid-row: auto; min-height: 420px; }
}
@media (max-width: 768px) {
    .telas-grid { grid-template-columns: 1fr; }
    .tela-card.feature { grid-column: span 1; }
}