/*
 * Theme overrides on top of the CSS extracted from the original site.
 * Keep this file small: every rule here is a deliberate difference from Bricks.
 */

/*
 * Deliverable photo carousel (.hc-fade). The original was a Bricks Swiper; it is a
 * Splide fade here, so Bricks' rules for nested slider slides also match it and
 * collapse it. Restore the original box: full width, 300px tall images.
 */
.brxe-carousel .hc-fade,
.brxe-carousel .hc-fade .splide__slide {
    display: block;
    width: 100%;
    height: 300px;
}

.brxe-carousel .hc-fade .image {
    width: 100%;
    height: 300px;
    /* Whole photo visible, as in the original Swiper (no cropping). */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/*
 * Images Bricks stretched to their box (also in the original): deliverable photos (the bag
 * is landscape), the decorative tail and the membership card on tablets.
 */
.brxe-hwpxhg,
#brxe-aqiezs,
#brxe-ygawmo {
    object-fit: contain;
}

/*
 * "Lo que incluye": Bricks fixed the slides at 65rem, ~180px taller than their content,
 * which left an empty grey block under each title. Deliberate difference: slides take
 * the height of their content. Phones keep the original sizing.
 */
@media (min-width: 479px) {
    #brxe-ydsdtm > .splide__track > .splide__list > .splide__slide {
        height: auto !important;
    }
}

/*
 * Cemetery filter and "Ver mas" (assets/js/cementerio.js) hide elements with the
 * `hidden` attribute; Bricks' display rules would otherwise override it.
 */
#brxe-ujacwu > [hidden],
#brxe-lxwvkj[hidden] {
    display: none !important;
}

/*
 * Entrance animations (assets/js/interactions.js): animate.css keeps elements with
 * `data-interaction-hidden-on-load` transparent until they animate. Without
 * JavaScript they would never appear, so show them.
 */
html:not(.hc-js) [data-interaction-hidden-on-load] {
    opacity: 1 !important;
}

/*
 * Affiliation lookup page (page-consulta-afiliacion.php and the plugin shortcode
 * [huellitas_consulta_vigencia]). Built from brand.css components; only layout lives here.
 */
.hc-consulta-page__icon {
    width: 6rem;
    height: auto;
}

.hc-consulta {
    display: flex;
    flex-direction: column;
    gap: var(--hc-space-5);
}

.hc-consulta > * {
    margin: 0;
}

/* White card with a soft edge so it reads over the pattern; fields side by side from tablets. */
.hc-consulta__form {
    display: grid;
    gap: var(--hc-space-4);
    border: 2px solid var(--hc-color-border);
}

.hc-consulta__acciones,
.hc-consulta__privacidad {
    margin: 0;
}

.hc-consulta__acciones {
    text-align: center;
}

.hc-consulta__acciones .hc-button {
    width: 100%;
}

.hc-consulta__privacidad {
    padding-top: var(--hc-space-4);
    border-top: 2px dashed var(--hc-grey-300);
}

@media (min-width: 768px) {
    .hc-consulta__form {
        grid-template-columns: 1fr 1fr;
        column-gap: var(--hc-space-5);
    }

    .hc-consulta__acciones,
    .hc-consulta__privacidad {
        grid-column: 1 / -1;
    }

    .hc-consulta__acciones .hc-button {
        width: auto;
        min-width: 26rem;
    }
}

/* Result: teal outline when paid up, orange when a payment is pending. */
.hc-consulta__resultado.is-alert {
    border-color: var(--hc-color-alert);
}

.hc-consulta__resultado h2 {
    margin-bottom: var(--hc-space-3);
}

.hc-consulta__resultado dl {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0;
}

.hc-consulta__resultado dt {
    padding-top: var(--hc-space-3);
    border-top: 2px dashed var(--hc-color-border);
    font-size: var(--hc-text-md);
    font-weight: var(--hc-weight-bold);
}

.hc-consulta__resultado dt:first-child {
    border-top: 0;
}

.hc-consulta__resultado dd {
    margin: 0;
    padding-bottom: var(--hc-space-3);
    font-size: var(--hc-text-md);
}

@media (min-width: 479px) {
    .hc-consulta__resultado dl {
        grid-template-columns: max-content 1fr;
        column-gap: var(--hc-space-5);
    }

    .hc-consulta__resultado dt,
    .hc-consulta__resultado dd {
        padding-block: var(--hc-space-3);
        border-top: 2px dashed var(--hc-color-border);
    }

    .hc-consulta__resultado dt:first-child,
    .hc-consulta__resultado dt:first-child + dd {
        border-top: 0;
    }
}

.hc-consulta__ayuda {
    margin: var(--hc-space-3) 0 0;
    font-size: var(--hc-text-sm);
}

/*
 * Main menu in the main header (huellitas_nav_menu('hc-nav-principal')). Same look as the
 * cemetery header menu (#brxe-xsmyjn in cementerio.css), but smaller: deliberate difference,
 * the original 3rem was too heavy next to the logo. Both menus use the scale of the home
 * body text (#brxe-ngkenv: 2.5rem, 1.9rem up to 1366px).
 */
#hc-nav-principal .bricks-nav-menu {
    gap: 2rem;
}

#hc-nav-principal .bricks-nav-menu > li > a {
    justify-content: flex-end;
    color: var(--bricks-color-msewvd, #595959);
    font-family: "Product Sans", sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
}

@media (max-width: 1366px) {
    #hc-nav-principal .bricks-nav-menu > li > a {
        font-size: 1.9rem;
    }
}

/* Same breakpoint as the cemetery header: below tablet landscape, the toggle. */
@media (max-width: 991px) {
    #hc-nav-principal > .bricks-nav-menu-wrapper {
        display: none;
    }

    #hc-nav-principal .bricks-mobile-menu-toggle {
        display: block;
    }
}

/* Menu items never break across lines. */
.hc-nav .bricks-nav-menu > li > a {
    white-space: nowrap;
}

/*
 * Cemetery header: logo, centre icon and menu. The side columns are forced equal so the
 * icon stays on the page centre, as in the original; the menu sits at the right edge.
 * The menu has two items here (the icon links to the cemetery), which fit the side column
 * from 992px; below that, the toggle.
 */
@media (min-width: 992px) {
    #brxe-hsgaul {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        column-gap: 2rem;
    }

    #brxe-anbhlj {
        justify-content: flex-end;
    }

    #brxe-xsmyjn .bricks-nav-menu {
        justify-content: flex-end;
        gap: 2rem;
    }

    #brxe-xsmyjn .bricks-nav-menu > li > a {
        font-size: 2.5rem;
    }
}

@media (min-width: 992px) and (max-width: 1366px) {
    #brxe-xsmyjn .bricks-nav-menu > li > a {
        font-size: 1.9rem;
    }
}


/*
 * Mobile menu panel: Bricks' panel was almost transparent and unreadable over photos.
 * Deliberate difference from the original: an opaque background.
 */
@media (max-width: 991px) {
    .hc-nav .bricks-mobile-menu-wrapper {
        background-color: rgba(250, 250, 250, 0.97);
    }

    .hc-nav .bricks-mobile-menu-overlay {
        background-color: rgba(245, 245, 245, 0.9) !important;
    }
}

.hc-nav .bricks-nav-menu > li.current-menu-item > a,
.hc-nav .bricks-mobile-menu > li.current-menu-item > a,
.hc-nav .bricks-nav-menu > li > a:hover {
    color: #ff9646;
}

@media (max-width: 478px) {
    #hc-nav-principal {
        padding: 2rem 1.5rem;
        border-radius: 10px;
        background-color: #ebebeb;
    }

    #hc-nav-principal .bricks-mobile-menu-toggle,
    #hc-nav-principal .bricks-mobile-menu-toggle .bar-top,
    #hc-nav-principal .bricks-mobile-menu-toggle .bar-center,
    #hc-nav-principal .bricks-mobile-menu-toggle .bar-bottom {
        width: 50px !important;
    }

    #hc-nav-principal .bricks-mobile-menu-toggle {
        color: rgba(89, 89, 89, 0.45);
    }

    #hc-nav-principal .bricks-mobile-menu-wrapper {
        top: 10vh;
        width: 100%;
        height: 70vh;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    #hc-nav-principal .bricks-mobile-menu-wrapper a {
        width: auto;
    }

    #hc-nav-principal .bricks-mobile-menu > li > a {
        padding-top: 5vh;
        color: var(--bricks-color-msewvd, #595959);
        font-family: "Product Sans", sans-serif;
        font-size: 2.5rem;
        font-weight: 400;
    }

    #hc-nav-principal .bricks-mobile-menu-wrapper:before {
        background-color: rgba(245, 245, 245, 0);
    }

    #hc-nav-principal .bricks-mobile-menu-overlay {
        background-color: rgba(245, 245, 245, 0.5);
    }
}

/* The memorial name became an <h1> (SEO); keep the line height it had as a <div>. */
h1#brxe-ezkdwv {
    line-height: inherit;
}

/* Download icon is now keyboard-focusable. */
#btn-descargar {
    cursor: pointer;
}

/*
 * Affiliation lookup banner (template-parts/afiliacion/consulta-banner.php), right under
 * the prices of /afiliacion/: the lookup left the main menu and needs to be easy to find.
 * Built on brand.css (outlined card look, .hc-button--primary); sizes are its own.
 */
.hc-consulta-banner {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    width: 100%;
    margin-top: var(--hc-space-4);
    padding: 2.5rem 3.5rem;
    border: var(--hc-border-width) solid var(--hc-color-primary);
    border-radius: var(--hc-radius-xl);
    background-color: var(--hc-color-surface);
    font-family: var(--hc-font-body);
}

.hc-consulta-banner__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 6rem;
    height: 6rem;
    border-radius: var(--hc-radius-round);
    background-color: var(--hc-color-accent);
    color: var(--hc-white);
    font-size: 2.6rem;
}

.hc-consulta-banner__text {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--hc-color-text);
    font-size: 1.8rem;
    line-height: 1.4;
}

.hc-consulta-banner__text p {
    margin: 0;
}

.hc-consulta-banner__title {
    color: var(--hc-color-primary);
    font-family: var(--hc-font-display);
    font-size: 2.6rem;
    font-weight: var(--hc-weight-bold);
    text-transform: uppercase;
}

.hc-consulta-banner__button {
    flex: none;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .hc-consulta-banner {
        flex-direction: column;
        text-align: center;
        padding: 2.5rem 2rem;
        gap: 1.5rem;
    }

    .hc-consulta-banner__title {
        font-size: 2.2rem;
    }

    .hc-consulta-banner__text {
        font-size: 1.6rem;
    }

    .hc-consulta-banner__button {
        white-space: normal;
    }
}

/*
 * Plans by age (template-parts/afiliacion/planes.php), new content under the prices of
 * /afiliacion/ (S15: regular and senior plans). Same card language as the lookup banner.
 */
.hc-planes {
    width: 100%;
    margin-top: var(--hc-space-4);
    font-family: var(--hc-font-body);
    color: var(--hc-color-text);
}

.hc-planes__title {
    margin: 0 0 1.5rem;
    color: var(--hc-color-primary);
    font-family: var(--hc-font-display);
    font-size: 2.6rem;
    font-weight: var(--hc-weight-bold);
    text-align: center;
    text-transform: uppercase;
}

.hc-planes__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
    gap: 2rem;
}

.hc-planes__card {
    padding: 2.5rem 3rem;
    border: var(--hc-border-width) solid var(--hc-color-primary);
    border-radius: var(--hc-radius-xl);
    background-color: var(--hc-color-surface);
}

.hc-planes__name {
    margin: 0;
    color: var(--hc-color-accent);
    font-family: var(--hc-font-display);
    font-size: 2.2rem;
    font-weight: var(--hc-weight-bold);
    text-transform: uppercase;
}

.hc-planes__ages {
    margin: 0.25rem 0 1.5rem;
    font-size: 1.7rem;
}

.hc-planes__prices {
    margin: 0;
}

.hc-planes__prices div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-top: 1px dashed var(--hc-color-primary);
    font-size: 1.8rem;
}

.hc-planes__prices dt {
    margin: 0;
}

.hc-planes__prices dd {
    margin: 0;
    font-weight: var(--hc-weight-bold);
}

.hc-planes__note {
    margin: 1.25rem 0 0;
    font-size: 1.5rem;
    text-align: center;
}

@media (max-width: 767px) {
    .hc-planes__title {
        font-size: 2.2rem;
    }

    .hc-planes__card {
        padding: 2rem;
    }
}

/*
 * Cemetery tombstones: Bricks grew width and height on hover, which reflowed the row:
 * the last tombstone jumped to the next line, the pointer left it, it came back, and so on.
 * Deliberate difference: same size in the layout, scaled with a transform (no reflow),
 * only on devices that really hover. The :hover rules below restore the resting size of
 * each breakpoint in cementerio.css.
 */
@media (max-width: 1366px) {
    .brxe-hlpyop:hover {
        width: 16rem;
        height: 26rem;
    }
}

@media (max-width: 478px) {
    .brxe-hlpyop:hover {
        width: 15rem;
        height: 25rem;
        margin: 0;
    }
}

@media (min-width: 1367px) {
    .brxe-hlpyop:hover {
        width: 23rem;
        height: 40rem;
    }
}

.brxe-hlpyop {
    transform-origin: bottom center;
    transition: transform 0.25s ease;
}

@media (hover: hover) {
    .brxe-hlpyop:hover {
        z-index: 2;
        transform: scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .brxe-hlpyop {
        transition: none;
    }
}

/*
 * /afiliacion/ hero (deliberate difference, defect E7 of the original): Bricks fixed the
 * section, the blue box and the price bar at 85vh / 62vh / 15vh, so on wide or short
 * screens the photo covered the prices and the title left the box. Above phones: heights
 * from content. Tablets: text, then the photo centred. Desktop: text and photo side by
 * side, fluid title size. Phones keep the original stacked layout.
 */
@media (min-width: 479px) {
    #brxe-pitono {
        height: auto;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        row-gap: 3rem;
        padding-bottom: 6rem;
    }

    #brxe-smwgtf {
        height: auto;
        flex-wrap: nowrap;
        overflow: clip;
    }

    #brxe-dpbekq {
        min-width: 0;
    }

    #brxe-wsepvy {
        line-height: 1.2;
    }

    #brxe-fgeazy {
        width: auto;
    }

    #brxe-dwthuo {
        height: auto;
        padding: 1.5rem 2rem;
        column-gap: 1rem;
    }
}

@media (min-width: 479px) and (max-width: 991px) {
    #brxe-smwgtf {
        flex-direction: column;
        align-items: stretch;
        row-gap: 3rem;
        padding: 5rem 5rem 0;
    }

    #brxe-dpbekq {
        row-gap: 2rem;
    }

    #brxe-wsepvy {
        font-size: clamp(2.8rem, 6vw, 3.9rem);
    }

    #brxe-fgeazy {
        width: min(100%, 52rem);
        align-self: center;
    }
}

@media (min-width: 992px) {
    #brxe-smwgtf {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        column-gap: 4rem;
        padding: 6rem 6rem 0 11rem;
    }

    #brxe-dpbekq {
        flex: 1 1 50%;
        row-gap: 3rem;
        padding-bottom: 6rem;
    }

    #brxe-wsepvy {
        font-size: clamp(3.2rem, 3.6vw, 6.5rem);
    }

    #brxe-fgeazy {
        flex: 0 1 45%;
        align-self: flex-end;
    }

    #brxe-dwthuo {
        flex-wrap: nowrap;
    }
}

@media (min-width: 992px) and (max-width: 1279px) {
    #brxe-smwgtf {
        column-gap: 2rem;
        padding-left: 7rem;
    }
}

/*
 * Tablets: three prices plus the card and the WhatsApp button do not fit in one row.
 * The decorative card is dropped and the button gets its own row.
 */
@media (min-width: 479px) and (max-width: 991px) {
    #brxe-dwthuo {
        flex-wrap: wrap;
        justify-content: center;
        gap: 7rem 1rem;
        padding: 2.5rem 2rem;
    }

    #brxe-zbwlva {
        display: none;
    }

    #brxe-dwthuo > .precios.brxe-div {
        flex: 1 1 0;
        width: auto;
    }

    #brxe-dwthuo > .precios > .box-text-precios {
        padding: 1rem 1.2rem;
    }

    #brxe-txmgij {
        flex: 0 0 100%;
        justify-content: center;
    }
}

/* Narrow tablets: prices stacked, as on phones, without the column separators. */
@media (min-width: 479px) and (max-width: 767px) {
    #brxe-dwthuo {
        flex-direction: column;
        align-items: center;
        gap: 7rem;
        padding: 3rem 2rem 2.5rem;
    }

    #brxe-dwthuo > .precios.brxe-div {
        flex: none;
        width: 100%;
    }

    #brxe-tvchso {
        border-right: 0;
        border-left: 0;
    }
}

/*
 * Prices: one line each. The notes under them ("(pago único)", "¡recomendado!") were
 * placed with vh offsets and percentage widths that clipped them; now they hang right
 * under their price, sized to their text.
 */
@media (min-width: 479px) {
    .precios.brxe-div {
        margin-top: 0;
        height: auto;
    }

    .precios > .box-text-precios {
        padding: 1rem 2.5rem;
    }

    .text-precios.brxe-text-basic {
        white-space: nowrap;
    }

    .precios .box-leyendas-precios.brxe-div,
    #brxe-hsilmm {
        top: calc(100% + 1.5rem);
        bottom: auto;
        width: auto;
        height: auto;
        padding: 0.6rem 1.6rem;
        white-space: nowrap;
    }
}

/*
 * /afiliacion/ waiting periods (deliberate difference, defect E7 of the original): the
 * "3 MESES" labels were rotated with a transform and pushed with vh offsets, and the text
 * pulled up with -18vh margins, so on several widths it covered the heading. Above
 * phones: an auto-fit grid (three columns when they fit, one otherwise), the label set
 * with writing-mode so it takes its real space, no fixed heights or negative margins.
 */
@media (min-width: 479px) {
    #brxe-rflmqm {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
        gap: 5rem 4rem;
    }

    #brxe-rflmqm > .box-item-carencia.brxe-div {
        width: auto;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        row-gap: 2rem;
    }

    #brxe-rflmqm .text-carencia.brxe-text-basic {
        height: auto;
    }

    #brxe-rflmqm .box-text-meses.brxe-div {
        height: auto;
        margin: 0;
        flex-wrap: nowrap;
        align-items: flex-start;
        column-gap: 2rem;
    }

    #brxe-rflmqm .box-meses-carencia.brxe-div {
        flex: none;
        width: auto;
        height: auto;
        transform: rotate(180deg);
        writing-mode: vertical-rl;
    }

    #brxe-rflmqm .text-qty-meses.brxe-text-basic {
        line-height: 1;
        padding-left: 1.2rem;
        border-bottom: 0;
        border-left: 4px dashed var(--bricks-color-iwfues, #02acc5);
    }

    #brxe-rflmqm .box-text-meses-carencia.brxe-div {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        margin: 0;
        padding: 0;
    }
}

/*
 * Responsive safety net for the extracted Bricks CSS (deliberate difference: these were
 * defects of the original, E27/E35).
 * - Bricks sizes many images by width and height at once, which stretched them; they keep
 *   their proportions unless a rule asks for cover. Never wider than their container.
 * - The footer contact list was a single row that did not fit below ~600px.
 * - The memorial text column wrapped into a second column off-screen below ~770px.
 */
.brxe-image {
    max-width: 100%;
    object-fit: contain;
}

/* The tombstone grass is meant to span the tombstone: crop, never shrink. */
img[src*="cesped"] {
    object-fit: cover;
}

#brxe-ubcydk {
    flex-wrap: wrap;
}

#brxe-yhukdx {
    flex-wrap: nowrap;
}

#brxe-qglihb {
    flex-wrap: wrap;
    row-gap: 1rem;
}

/*
 * Home hero: "Conocer Afiliación" (now linking to /afiliacion/) wrapped under the main
 * button. From 1280px both stay on one row, one line each, at their original size; the
 * row may run past the text column into the free space before the photo. Between 1367px
 * and 1549px the original size would reach the photo, so they use the compact sizes the
 * original had at 1366px. Narrower screens stack them, as in the original.
 */
@media (min-width: 1280px) {
    #brxe-xgdbnx {
        width: max-content;
        flex-wrap: nowrap;
        align-items: center;
    }

    #brxe-fxjylm,
    #brxe-lchfpc {
        flex: none;
        white-space: nowrap;
    }
}

@media (min-width: 1367px) and (max-width: 1549px) {
    #brxe-fxjylm {
        padding: 15px 28px;
        font-size: 1.8rem;
        font-weight: 600;
    }

    #brxe-fxjylm i {
        font-size: 2.5rem;
    }

    #brxe-lchfpc {
        padding-right: 10px;
        padding-left: 10px;
        font-size: 16px;
    }
}

/*
 * /afiliacion/ on phones: the hero keeps Bricks' 85vh height, already filled by the
 * original blocks, so the lookup banner wrapped into a second flex column off-screen
 * (horizontal scroll at 390px). Heights from content; the gap matches the spacing the
 * blocks had inside the 85vh box.
 */
@media (max-width: 478px) {
    #brxe-pitono {
        height: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        row-gap: 6rem;
    }
}

/*
 * Memorial name (deliberate difference, defect E35 of the original): a fixed 13rem /
 * 8.5rem / 7rem name did not fit its column, so "Alegría" ran off-screen even at 1440px
 * and most names did at 563-768px. The size never exceeds the original and shrinks to
 * fit the column: 34vw is the column's inner width (40% minus 3vw padding per side), 84vw
 * on phones (100% minus 8vw per side); 0.72em is the widest Chennai uppercase average per
 * character measured on the memorials. --hc-name-chars comes from functions.php.
 */
h1#brxe-ezkdwv {
    font-size: min(13rem, 34vw / (var(--hc-name-chars, 5) * 0.72));
    white-space: nowrap;
}

@media (max-width: 1366px) {
    h1#brxe-ezkdwv {
        font-size: min(8.5rem, 34vw / (var(--hc-name-chars, 5) * 0.72));
    }
}

@media (max-width: 478px) {
    h1#brxe-ezkdwv {
        font-size: min(7rem, 84vw / (var(--hc-name-chars, 5) * 0.72));
    }
}

/*
 * Home "¿Quieres afiliar a tu(s) mascota(s)?" (deliberate difference, defect of the
 * original): the cat and the card were sized in vh (50vh / 49vh), so at common window
 * heights the card covered the title and the text beside it at every width from 479px,
 * and ran off-screen at 563-768px. Both images now share their column by width with the
 * original proportions (same height, card 8% behind the cat); the section grows with its
 * content instead of being cut at 90vh.
 */
@media (min-width: 479px) {
    #brxe-pjbnde {
        height: auto;
        min-height: 90vh;
    }

    #brxe-ueseih {
        width: 100%;
        align-items: center;
    }

    #brxe-iirnlg {
        flex: 0 1 40%;
        min-width: 0;
        width: auto;
        height: auto;
    }

    #brxe-ygawmo {
        flex: 0 1 68%;
        min-width: 0;
        width: auto;
        height: auto;
    }
}

/* Tablets: the two columns do not fit side by side; images first, then the text. */
@media (min-width: 479px) and (max-width: 991px) {
    #brxe-qzjatq {
        width: 100%;
        justify-content: center;
    }

    #brxe-dhtvlb {
        width: 100%;
        justify-content: center;
    }

    #brxe-edjhrj {
        width: 100%;
        align-items: center;
        margin-top: 5rem;
        padding-left: 0;
        text-align: center;
    }

    #brxe-jfdlhm {
        align-items: center;
    }
}

/*
 * Home testimonials (deliberate difference, defect E27 of the original): between 479px
 * and 991px the "5000" block and the slider shared a row, so the slider sat almost
 * entirely off-screen and its cards were squeezed. Stacked as on phones, the slider takes
 * the content width and shows one card at a time, full width, as on phones (Bricks fixed
 * the cards at 22vw, which overrides Splide's width). The avatar never shrinks (it became
 * an oval), and the name takes the free space up to the quote mark.
 */
.brxe-wvqzfj .brxe-sanoey.brxe-image {
    flex: none;
}

@media (min-width: 479px) and (max-width: 991px) {
    #brxe-zntyxx {
        flex-direction: column;
        align-items: center;
        row-gap: 5rem;
    }

    #brxe-heauof {
        width: 100%;
        margin-left: 0;
    }

    .brxe-wvqzfj.brxe-block {
        min-width: 100%;
        max-width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    .brxe-wvqzfj .brxe-yqgelw.brxe-div {
        width: 100%;
    }

    .brxe-wvqzfj .brxe-pfkwjp.brxe-div {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        margin-right: 4.5rem;
    }
}

/*
 * Footer (deliberate difference, defect of the original): between 479px and 991px the
 * logo column and the form column wrap, so the fixed 55vh footer cut the contact list
 * into the copyright bar and the hearts (back_footer.png at 39%) landed on the social
 * icons. Below 992px: the two columns stacked and centred, heights from content, and the
 * hearts drawn smaller in the left margin, beside the centred logo (phones too; their
 * layout and heights are unchanged).
 */
@media (max-width: 991px) {
    #brxe-nxlcvp {
        background-size: 24rem auto;
        background-position: left -2rem top 2rem;
    }
}

@media (min-width: 479px) and (max-width: 991px) {
    #brxe-nxlcvp {
        height: auto;
    }

    #brxe-yiaeqq {
        height: auto;
        padding-top: 5rem;
        row-gap: 3rem;
    }

    #brxe-jawshj,
    #brxe-czrifp {
        width: 100%;
    }

    #brxe-czrifp {
        align-items: center;
    }

    /* Bricks fixed the subscribe form at 50rem, wider than the column below ~560px. */
    #brxe-xusork {
        width: 50rem;
        min-width: 0;
        max-width: 100%;
    }

    #brxe-ubcydk {
        justify-content: center;
    }

    #brxe-zvdalw {
        height: auto;
        padding: 3rem 8vw;
    }
}

/*
 * Home hero on narrow tablets (deliberate difference, defect E27 of the original): from
 * 479px to 767px the title column was too narrow, so "CREMATORIO" ran under the dog photo
 * and a decorative image (placed with a fixed 160px margin) scrolled the page sideways at
 * 479-520px; the 80vh section also cut the buttons. Stacked as on phones: the photo group
 * first, then the text, heights from content.
 */
@media (min-width: 479px) and (max-width: 767px) {
    #brxe-kdopla {
        flex-direction: column;
        flex-wrap: nowrap;
        height: auto;
        row-gap: 4rem;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    #brxe-yanxeu {
        width: 100%;
    }

    #brxe-pvhgot {
        order: -1;
        width: 100%;
        height: auto;
        justify-content: center;
    }
}

/*
 * Home "Así funciona" card on narrow tablets (deliberate difference, defect E27 of the
 * original): from 479px to 767px the 80vh card kept the desktop rows, so the four steps
 * ran into each other ("DESPEDIDA" over "DE MASCOTA", the last one cut), the intro text
 * was clipped and the "Solicitar Servicio" button left the card. Heights from content,
 * steps in two columns (the dashed connector only fits one row), the bottom bar stacked.
 */
@media (min-width: 479px) and (max-width: 767px) {
    #brxe-vgzzky {
        row-gap: 4rem;
        background-image: none;
    }

    #brxe-vgzzky > .incluye-items-box.brxe-div {
        width: 50%;
    }

    #brxe-dtvsxp {
        flex-direction: column;
    }

    #brxe-rnnclw {
        width: 100%;
        align-items: center;
        border-right: 0;
        border-bottom: 2px solid rgba(33, 33, 33, 0.25);
    }

    #brxe-iffuvh {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem 4rem;
    }

    #brxe-curbba {
        height: auto;
    }
}

/*
 * "Así funciona" band from 992px (deliberate difference, defect of the original): below
 * ~1900px the "ASI FUNCIONA" title did not fit beside the photo, wrapped under it and was
 * drawn white on white behind the first step. It now stays beside the photo.
 */
@media (min-width: 992px) {
    #brxe-qohull {
        flex-wrap: nowrap;
    }

    /* The photo gives way; the title never gets narrower than "FUNCIONA". */
    #brxe-cprnhw {
        flex: 0 1 auto;
        min-width: 0;
    }

    #brxe-gtemlu {
        flex: 0 1 65%;
    }
}

@media (min-width: 992px) and (max-width: 1279px) {
    #brxe-gtemlu {
        font-size: 2.5rem;
    }
}

/*
 * "Así funciona" card up to 991px: heights from content (the 80vh card clipped the intro
 * text and the button), and in the band the photo and the title on one row with the intro
 * text below (side by side, "FUNCIONA" ran over the photo and the text).
 */
@media (min-width: 479px) and (max-width: 991px) {
    #brxe-etrmnu,
    #brxe-etrmnu > .top_bottom_comofunciona.brxe-div {
        height: auto;
    }

    #brxe-vgzzky {
        height: auto;
        padding: 4rem 0;
    }

    #brxe-roxwvk {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    #brxe-qohull {
        width: 100%;
        height: auto;
        flex-wrap: nowrap;
        align-items: flex-end;
        column-gap: 2rem;
    }

    #brxe-cprnhw {
        flex: 0 0 40%;
        height: auto;
    }

    #brxe-gtemlu {
        flex: 1 1 0;
        width: auto;
        height: auto;
        align-self: center;
        border-right: 0;
    }

    #brxe-qgblle {
        width: 100%;
        padding: 0 4vw 3rem;
    }
}

/*
 * Home "Lo que incluye" on narrow tablets (deliberate difference, defect E27 of the
 * original): from 479px to 767px the title column and the carousel shared a row, so
 * "LO QUE INCLUYE" was clipped on the left and the first card ran off-screen. Stacked as
 * on phones; the pagination, placed under the title on wider screens, goes under the cards.
 */
@media (min-width: 479px) and (max-width: 767px) {
    #brxe-yhvuvv {
        flex-direction: column;
        align-items: center;
        row-gap: 4rem;
    }

    #brxe-jeqrzw {
        width: auto;
    }

    #brxe-ydsdtm {
        width: 100%;
        margin-left: 0;
        margin-bottom: 5rem;
    }

    #brxe-ydsdtm > .splide__pagination {
        right: 0;
        bottom: -4rem;
        left: 0;
        justify-content: center;
    }
}

/*
 * Footer contact block (template-parts/footer-contacto.php), where the original had a
 * newsletter form that sent nothing (L59). Stands in for the broken /contacto/ page.
 * Light text on the footer background, orange title like the footer icons.
 */
.hc-footer-contacto {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.5rem;
    width: 100%;
    color: var(--bricks-color-eff044);
    font-family: var(--hc-font-body);
    text-align: right;
}

.hc-footer-contacto__title {
    margin: 0;
    color: var(--bricks-color-ynenpz);
    font-family: var(--hc-font-display);
    font-size: 2.6rem;
    font-weight: var(--hc-weight-bold);
    text-transform: uppercase;
}

/* Same look as the footer's e-mail and phone items: icon in a dark disc, light text. */
.hc-footer-contacto__whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    color: var(--bricks-color-eff044);
    font-family: "Product Sans", var(--hc-font-body);
    font-size: 2.7rem;
    text-decoration: none;
}

.hc-footer-contacto__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 6rem;
    height: 6rem;
    border-radius: var(--hc-radius-round);
    background-color: var(--hc-teal-dark);
    color: var(--bricks-color-ynenpz);
    font-size: 2.5rem;
    transition: background-color 0.2s ease;
}

.hc-footer-contacto__whatsapp:hover .hc-footer-contacto__icon,
.hc-footer-contacto__whatsapp:focus-visible .hc-footer-contacto__icon {
    background-color: var(--bricks-color-ynenpz);
    color: var(--hc-white);
}

.hc-footer-contacto__whatsapp:hover,
.hc-footer-contacto__whatsapp:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

.hc-footer-contacto__address {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 0;
    font-size: 1.8rem;
}

.hc-footer-contacto__address .fa-location-dot {
    color: var(--bricks-color-ynenpz);
}

.hc-footer-contacto__map {
    color: inherit;
    font-weight: var(--hc-weight-bold);
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

.hc-footer-contacto__map:hover,
.hc-footer-contacto__map:focus-visible {
    color: var(--bricks-color-ynenpz);
}

@media (max-width: 991px) {
    .hc-footer-contacto {
        align-items: center;
        text-align: center;
    }

    .hc-footer-contacto__address {
        justify-content: center;
    }
}

/* Phones: the original footer had fixed heights; the contact block needs its content height. */
@media (max-width: 478px) {
    #brxe-nxlcvp,
    #brxe-yiaeqq {
        height: auto;
    }

    #brxe-yiaeqq {
        padding-bottom: 3rem;
        row-gap: 2.5rem;
    }

    .hc-footer-contacto__title {
        font-size: 2rem;
    }

    .hc-footer-contacto__whatsapp {
        font-size: 2rem;
    }

    .hc-footer-contacto__icon {
        width: 5rem;
        height: 5rem;
        font-size: 2.2rem;
    }

    .hc-footer-contacto__address {
        font-size: 1.5rem;
    }
}