/* ==========================================================================
   Imagenes de servicio: que llenen su espacio y se vean mas grandes
   Se carga desde _Layout despues de precio-servicio.css.

   1) Ficha de servicio: la foto pierde los 15px de gutter de su columna
      (solo desde tablet; en movil conserva el margen del contenedor).
   2) Tarjeta de los indices: se quita el tope de 176px de profesional.css y la
      foto toma el ancho completo de la tarjeta, recortada a 4:3 con object-fit.
      Los selectores llevan una clase de mas (0,2,1) porque cada indice define
      su propio .servicio-card img en @section Styles, que se renderiza despues.
   ========================================================================== */

@media (min-width: 768px) {
    .servicio-contenido {
        padding-left: 0;
        padding-right: 0;
    }
}

.servicio-card .servicio-foto img,
.servicio-card > img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    /* 1:1: las fotos de servicio son cuadradas y con 4:3 se recortaban la cabeza
       y el mentón. Con contain no se recorta nada: las que no son cuadradas
       (las viejas de 700x600) quedan centradas sobre blanco, sin perder imagen. */
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: center;
    background: #fff;
    margin: 0 auto .85rem;
    border-radius: 15px;
}

/* Boton "Entrar" de las tarjetas: pastilla blanca, borde y texto azul marino.
   Va debajo de la descripcion basica para que se vea que la ficha existe. */
.servicio-entrar {
    display: inline-block;
    margin-top: .85rem;
    padding: .5rem 1.75rem;
    border: 2px solid #051350;
    border-radius: 999px;
    background: #fff;
    color: #051350;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    -webkit-transition: .25s;
    transition: .25s;
}

.servicio-entrar:hover,
.servicio-entrar:focus {
    background: #051350;
    color: #fff;
    text-decoration: none;
}

/* Precio corto en las tarjetas del indice (el bloque completo va en cada ficha). */
.servicio-precio {
    margin: .6rem 0 0;
    color: #52607a;
    font-size: .9rem;
}

.servicio-precio strong {
    color: #051350;
    font-size: 1rem;
    white-space: nowrap;
}

/* Separacion minima entre la descripcion y lo que sigue (precio o boton): los
   indices fijan .servicio-card p { margin-bottom: 0 } y con textos largos el boton
   quedaba pegado a la ultima linea. h3 + p (0,1,2) le gana a esa regla. */
.servicio-card h3 + p {
    margin-bottom: .6rem;
}

/* Tarjetas en columna: el precio y el boton se pegan al fondo para que las
   tarjetas de una misma fila queden alineadas aunque la descripcion tenga
   distinto largo. El boton necesita align-self porque en flex se estiraria. */
.servicio-card {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}

.servicio-card .servicio-precio {
    margin-top: auto;
    /* (0,2,0) para ganarle al .servicio-card p { font-size: 14px } de cada indice. */
    font-size: .9rem;
}

/* Si no hay precio, el que se pega al fondo es el boton. Si hay precio, el
   boton conserva su margen corto para no dejar un hueco entre precio y boton. */
.servicio-card .servicio-entrar {
    -ms-flex-item-align: center;
    align-self: center;
    margin-top: auto;
}

.servicio-card .servicio-precio + .servicio-entrar {
    margin-top: .85rem;
}

/* En movil la tarjeta mide ~165px y "Desde $3,500 MXN" no cabe a 14px: baja un
   punto de tamano en vez de partir el monto en dos lineas. Va al final para
   ganar por orden sobre las reglas de arriba, que tienen la misma especificidad. */
@media (max-width: 575px) {
    .servicio-card .servicio-precio {
        font-size: .8rem;
    }

    .servicio-card .servicio-precio strong {
        font-size: .95rem;
    }
}