/*
 * El tema original usaba un set de iconos pequeños (60x60) para los
 * botones de pestaña y uno más grande (95x95) para el icono dentro del
 * contenido. El CMS solo administra un icon_image por servicio y se
 * reutiliza en ambos lugares, así que se limita aquí el tamaño dentro
 * del botón para no depender de que el admin suba un archivo ya
 * recortado a 60x60.
 */
/*
 * El excerpt real de cada servicio puede ser más largo que el texto
 * de muestra del tema original, y la caja de "service-text" tiene una
 * altura fija al hacer hover (75px). Se recorta con overflow:hidden
 * para que un texto más largo no se salga del recuadro.
 */
.service-box .service-text {
    overflow: hidden;
}

/*
 * El iframe del mapa de /contacto tiene width="600" fijo por HTML. El
 * reset global del tema (img, embed, object, video { max-width:100% })
 * no incluye iframe, asi que en pantallas mas angostas que 600px
 * desbordaba el ancho de la pagina. Se fuerza a 100% del contenedor y
 * se reduce el alto en mobile para que la proporcion no quede
 * demasiado alargada.
 */
.contact-location iframe {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 767px) {
    .contact-location iframe {
        height: 300px;
    }
}

.service-tab .sr-icon-btn img {
    max-width: 60px;
    max-height: 60px;
    width: auto;
    height: auto;
}

.service-steps {
    counter-reset: service-step;
    list-style: none;
    padding-left: 0;
    margin-bottom: 25px;
}

.service-steps li {
    counter-increment: service-step;
    position: relative;
    padding: 8px 0 8px 45px;
    font-weight: 500;
}

.service-steps li::before {
    content: counter(service-step);
    position: absolute;
    left: 0;
    top: 6px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--theme-color, #fe5d37);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.service-packages-row {
    margin-top: 40px;
}

.service-package-category {
    margin: 10px 0 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--theme-color, #fe5d37);
    font-size: 18px;
    color: var(--theme-color, #fe5d37);
}

.service-package-card {
    height: 100%;
    padding: 25px;
    border: 1px solid #eee;
    border-radius: 12px;
    background-color: #fff;
}

.service-package-card img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 15px;
}

.service-package-card h4 {
    margin-bottom: 10px;
}

.service-package-meta {
    list-style: none;
    padding-left: 0;
    margin: 12px 0;
    font-size: 15px;
}

.service-package-meta li {
    padding: 3px 0;
}

/*
 * Un grupo/paquete puede tener varias tarifas (ej. precio distinto
 * por dia de la semana), separadas por "·" en el mismo campo de
 * texto. En vez de mostrarlas como un parrafo largo y corrido, cada
 * tarifa se lista en su propia linea.
 */
.service-package-price {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.service-package-price li {
    padding: 8px 12px;
    border-radius: 8px;
    background-color: rgba(254, 93, 55, 0.08);
    color: var(--theme-color, #fe5d37);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
}

.service-addon-group {
    margin: 20px 0 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--theme-color, #fe5d37);
    color: var(--theme-color, #fe5d37);
    font-size: 18px;
}

.service-addon-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 15px;
}

.service-addon-list li {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 6px 0;
    border-bottom: 1px dashed #e5e5e5;
}

.service-addon-price {
    font-weight: 700;
    white-space: nowrap;
}

/*
 * El tema arma estas tarjetas con data-bg-src (background-image), sin
 * una altura propia definida en el CSS del tema: normalmente la
 * heredaba de un carrusel con alturas iguales. Como aca se usa en una
 * grilla simple, se le da una proporcion fija para que la tarjeta
 * nunca quede en 0px de alto (invisible) cuando un servicio todavia
 * no tiene imagen de portada cargada; en ese caso se ve como una
 * tarjeta solida con el color del tema en vez de desaparecer.
 */
.service-box {
    aspect-ratio: 3 / 4;
    background-color: var(--theme-color);
}

/*
 * En una sola columna (mobile) la proporcion 3:4 deja tarjetas muy
 * altas para las 6 tarjetas apiladas; se acorta un poco para que la
 * pagina no quede tan larga sin perder la garantia de que la tarjeta
 * nunca colapse a 0px.
 */
@media (max-width: 767px) {
    .service-box {
        aspect-ratio: 16 / 11;
    }
}

/*
 * Por defecto (sin hover) el título y el texto van en blanco directo
 * sobre la foto, sin ningún fondo detrás, así que sobre fotos claras
 * quedaban poco legibles. Se agrega un degradado oscuro permanente
 * detrás del contenido (más fuerte abajo, donde está el texto, y
 * transparente arriba) para que siempre se lea bien, tanto con como
 * sin hover.
 */
.service-box .service-content {
    background-image: linear-gradient(to top, rgba(10, 10, 20, 0.8) 0%, rgba(10, 10, 20, 0.45) 40%, rgba(10, 10, 20, 0) 75%);
}

/*
 * El eyebrow (".sub-title") es naranja en todo el sitio, pero dentro
 * de esta tarjeta el fondo tambien se pone naranja solido al pasar el
 * mouse (ver .service-box:hover .service-content en el tema), asi que
 * el texto quedaba invisible sobre su propio color. Se fuerza a
 * blanco, igual que el titulo.
 */
.service-box .sub-title {
    color: #fff;
}

.service-gallery-item {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.service-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s ease-in-out;
}

.service-gallery-item:hover img {
    transform: scale(1.08);
}

/*
 * Simulador de precio en /servicios/{slug} (visible solo si el
 * servicio tiene grupos/extras con price_amount cargado desde el
 * admin). Los checkboxes que comparten data-group se comportan como
 * si fueran radios (JS se encarga de desmarcar los demas del mismo
 * grupo), para representar paquetes que se excluyen entre si (ej.
 * Deco Temático/Plata/Oro) sin perder la posibilidad de dejar la
 * categoria sin elegir.
 */
.simulator-group {
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 18px;
}

.simulator-group legend {
    padding: 0 8px;
    font-weight: 700;
}

.simulator-group legend small {
    font-weight: 400;
    color: #777;
}

.simulator-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed #e5e5e5;
    cursor: pointer;
}

.simulator-option:last-child {
    border-bottom: none;
}

.simulator-option.is-selected {
    background-color: rgba(254, 93, 55, 0.08);
    border-radius: 8px;
    padding-left: 10px;
    padding-right: 10px;
    margin: 0 -10px;
    border-bottom-color: transparent;
}

.simulator-option.is-selected span {
    font-weight: 700;
}

.simulator-option.is-selected span::after {
    content: " ✓";
    color: var(--theme-color, #fe5d37);
}

.simulator-option input {
    width: auto;
    flex-shrink: 0;
}

.simulator-option span {
    flex: 1 1 auto;
}

.simulator-option strong {
    color: var(--theme-color, #fe5d37);
    white-space: nowrap;
}

.simulator-summary {
    position: sticky;
    top: 20px;
}

.simulator-detail {
    list-style: none;
    padding: 0;
    margin: 14px 0;
}

.simulator-detail li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed #e5e5e5;
}

.simulator-detail li span {
    flex: 1 1 auto;
}

.simulator-remove {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    line-height: 22px;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: #fff;
    color: #999;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}

.simulator-remove:hover {
    background-color: var(--theme-color, #fe5d37);
    border-color: var(--theme-color, #fe5d37);
    color: #fff;
}

/*
 * Boton al inicio de la pagina que salta a #simulador. scroll-margin-top
 * evita que el header fijo del sitio tape la parte de arriba de la
 * seccion al saltar directo con el ancla.
 */
.simulator-jump {
    margin-top: 20px;
}

#simulador {
    scroll-margin-top: 110px;
}

html {
    scroll-behavior: smooth;
}

.simulator-detail .simulator-empty {
    color: #777;
    justify-content: flex-start;
}

.simulator-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    margin: 14px 0 18px;
}

.simulator-total strong {
    color: var(--theme-color, #fe5d37);
    font-size: 24px;
}

.service-notes {
    list-style: disc;
    padding-left: 20px;
    font-size: 14px;
    color: #777;
}

.service-notes li {
    padding: 3px 0;
}