/* Imagen */
.img-medidas {
  max-width: 100%;
  height: auto;
  border: 1px solid #ccc;
  border-radius: 6px;
}

/* Tabla de medidas */
.tabla-medidas {
  margin-top: 1rem;
}

.fila-medida {
  padding: 0.5rem 0;
  border-bottom: 1px solid #e0e0e0;
}

.fila-medida strong {
  color: #0078a0; /* azul corporativo */
}

/* Responsive ajustes */
@media screen and (max-width: 640px) {
  .fila-medida {
    font-size: 0.9rem;
  }
  .img-medidas {
    margin-bottom: 1rem;
  }
}




#tallas .callout-1   { padding: 70px 0; background: #fff; }
#tallas .callout-1 h3 {font-size: 25px; margin-bottom: 15px;}




/* =====================================================
   SECCIÓN GENERAL
===================================================== */

.tallas-section {
    width: 100%;
    margin: 0;
    padding: 45px 0;
    background: #fff;
}

.tallas-section > .row {
    max-width: 1200px;
}

.tallas-bloque {
    width: 100%;
    margin: 0 0 35px;
}


/* =====================================================
   CONTENEDOR RESPONSIVE
===================================================== */

.table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}


/* =====================================================
   TABLA PRINCIPAL
===================================================== */

.tallas-table {
    width: 100%;
    margin: 0;
    border: 1px solid #ccc;
    border-collapse: collapse;
    border-spacing: 0;
    background: #fff;

    /* Evita que las columnas se deformen */
    table-layout: fixed;
}


/* =====================================================
   CELDAS
===================================================== */

.tallas-table th,
.tallas-table td {
    height: 45px;
    padding: 10px 8px;

    border: 1px solid #ccc;

    text-align: center;
    vertical-align: middle;

    font-size: 14px;
    line-height: 1.3;
}


/* =====================================================
   PRIMERA COLUMNA
===================================================== */

.tallas-table th:first-child {
    width: 26%;
    text-align: left;
    padding-left: 18px;
    white-space: nowrap;
}


/* =====================================================
   COLUMNAS DE TALLAS
===================================================== */

.tallas-table td {
    width: auto;
    white-space: nowrap;
}


/* =====================================================
   ENCABEZADO SUPERIOR
===================================================== */

.tallas-table thead .tallas-titulo th {
    height: 50px;
    padding: 0;
}


/*
   Nombre de la prenda
   Queda a la izquierda
*/

.tallas-nombre {
    background: #ccc !important;
    color: #222 !important;

    text-align: left !important;
    padding-left: 18px !important;

    font-size: 17px !important;
    font-weight: 700;
}


/*
   Talla Caballero / Talla Dama
   Queda SOBRE LAS COLUMNAS FINALES
*/

.tallas-genero {
    background: #999 !important;
    color: #fff !important;

    text-align: center !important;

    font-size: 13px !important;
    font-weight: 700;
}


/* =====================================================
   FILA DE TALLAS
===================================================== */

.tallas-table thead tr:not(.tallas-titulo) th {
    background: #f1f1f1;
    color: #222;

    font-weight: 700;
    text-align: center;
}


/*
   La primera celda "TALLA"
   sigue alineada a la izquierda
*/

.tallas-table thead tr:not(.tallas-titulo) th:first-child {
    text-align: left;
}


/* =====================================================
   CUERPO
===================================================== */

.tallas-table tbody th {
    background: #f5f5f5;
    font-weight: 700;
}

.tallas-table tbody td {
    background: #fff;
}


/* =====================================================
   HOVER
===================================================== */

.tallas-table tbody tr:hover th,
.tallas-table tbody tr:hover td {
    background: #fafafa;
}


/* =====================================================
   TABLET
===================================================== */

@media screen and (max-width: 63.9375em) {

    .tallas-section {
        padding: 35px 0;
    }

    .tallas-table {
        min-width: 700px;
    }

    .tallas-table th,
    .tallas-table td {
        height: 42px;
        padding: 9px 7px;
        font-size: 13px;
    }

    .tallas-nombre {
        font-size: 16px !important;
    }

    .tallas-genero {
        font-size: 12px !important;
    }
}


/* =====================================================
   MÓVIL
===================================================== */

@media screen and (max-width: 39.9375em) {

    .tallas-section {
        padding: 25px 0;
    }

    .tallas-bloque {
        margin-bottom: 25px;
    }

    /*
       La tabla conserva sus proporciones.
       En móvil se desplaza horizontalmente.
    */

    .tallas-table {
        min-width: 680px;
    }

    .tallas-table th,
    .tallas-table td {
        height: 40px;
        padding: 8px 6px;
        font-size: 12px;
    }

    .tallas-nombre {
        padding-left: 14px !important;
        font-size: 15px !important;
    }

    .tallas-genero {
        font-size: 11px !important;
    }

}