/* ============================================================
   Handyman — capa de las páginas con contenido

   hm.css trae el sistema tal cual salió del prototipo. Aquí solo van los
   ajustes para encajarlo con los datos reales de Laravel: la marca usa el
   logo subido en vez del cuadro con la inicial, y las imágenes que hoy
   faltan necesitan un sustituto digno.
   ============================================================ */

/* ---------- Ancho del contenido ----------
   Un solo valor para todo: fichas, listados y bloques de contenido salen
   del mismo token, así ninguna página se ve más ancha que otra. El
   prototipo traía 1320px; se sube para que quepan cuatro tarjetas por fila
   sin que el resto de páginas se descuelgue.
   Lo usan .detail-layout, .results-layout, .related, .results-head .inner,
   .detail-top, .wrap, .foot-lead y .bridge-wrap. */
:root { --wrap: 1400px }

/* ---------- Marca con el logo real ---------- */
.site-header .brand img { height: 34px; width: auto; flex: 0 0 auto }
.site-footer .brand img { height: 32px; width: auto; flex: 0 0 auto }
.site-footer .brand .name { color: #fff }

/* ---------- Barra superior: selector de idioma ---------- */
.topbar .tb-lang { display: inline-flex; gap: 10px }
.topbar .tb-lang a { color: var(--topbar-ink); opacity: .55 }
.topbar .tb-lang a.is-active { opacity: 1; font-weight: 500 }
.topbar .tb-lang a:hover { opacity: 1 }

/* ---------- Redes del pie ---------- */
.site-footer .social { display: flex; gap: 12px; margin-top: 20px }
.site-footer .social a {
    width: 34px; height: 34px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .07); color: var(--topbar-ink);
    transition: background .2s, color .2s;
}
.site-footer .social a:hover { background: var(--primary); color: #fff }

/* ---------- Sustituto de las fotos que faltan ----------
   Hoy faltan en disco casi todas las imágenes del sitio. Antes que repetir
   el mismo placeholder gris por toda la rejilla, se pinta un bloque con el
   color de la marca y la inicial del servicio. */
.thumb-fallback {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, var(--lilac), #DCD7F7);
}
.thumb-fallback::after {
    content: attr(data-letter);
    font-family: 'Outfit', 'DM Sans', sans-serif; font-weight: 700;
    font-size: 46px; letter-spacing: -.03em; color: var(--primary);
    opacity: .5;
}

/* ---------- Favorito marcado de verdad ---------- */
.service-card .fav.is-on { color: var(--orange) }

/* ---------- Nombre del profesional sin foto ---------- */
.service-card .pro { min-width: 0 }
.service-card .pro span,
.service-card .pro { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* ============================================================
   Ficha de servicio
   ============================================================ */

/* ---------- Migas de pan ----------
   Como en el prototipo: separador ›, y el último tramo en tinta plena. */
.detail-top { max-width: var(--wrap); margin: 0 auto; padding: 22px 40px 0 }
.detail-top .breadcrumb { margin-bottom: 0 }
.breadcrumb .current { color: var(--ink) }

/* ---------- Tira de datos rápidos ----------
   Los acentos del sistema van como fondo completo de bloque, que es la regla
   del documento: nunca como filete ni como detalle. */
.quick-strip .q { border: 0 }
.quick-strip .q-lilac  { background: var(--lilac) }
.quick-strip .q-lilac .qi  { color: var(--primary) }
.quick-strip .q-mint   { background: var(--mint) }
.quick-strip .q-mint .qi,
.quick-strip .q-mint .qv   { color: var(--mint-ink) }
.quick-strip .q-mint .ql   { color: rgba(18, 50, 31, .66) }
.quick-strip .q-pink   { background: var(--pink) }
.quick-strip .q-pink .qi,
.quick-strip .q-pink .qv   { color: var(--pink-ink) }
.quick-strip .q-pink .ql   { color: rgba(90, 51, 72, .66) }
.quick-strip .q-orange { background: var(--orange) }
.quick-strip .q-orange .qi,
.quick-strip .q-orange .qv { color: #fff }
.quick-strip .q-orange .ql { color: rgba(255, 255, 255, .75) }

/* Distintivos de la galería */
.gallery .badges .pill.mint { background: var(--mint); color: var(--mint-ink) }

/* ---------- Texto largo ---------- */
.detail-section .prose { line-height: 1.7; color: var(--muted); font-size: 15px }

/* ---------- Servicios adicionales ---------- */
.include-grid .it { display: flex; align-items: center; gap: 11px }
.include-grid .it .ico {
    width: 26px; height: 26px; border-radius: 9px; flex: 0 0 auto;
    background: var(--lilac); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
}
.include-grid .it .t { flex: 1 }
.include-grid .it .p { font-family: 'Outfit', sans-serif; font-weight: 600; color: var(--ink) }

/* ---------- Dónde se presta ---------- */
.place-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px }
.place {
    display: flex; gap: 12px; align-items: center;
    background: #fff; border: 1px solid var(--line-soft); border-radius: 16px; padding: 14px 16px;
}
.place .ico {
    width: 34px; height: 34px; border-radius: 11px; flex: 0 0 auto;
    background: var(--lilac); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
}
.place .pn { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 15px }
.place .pl { font-size: 12.5px; color: var(--muted-2); margin-top: 2px }

/* ---------- Panel del profesional ---------- */
.pro-panel { grid-template-columns: auto 1fr auto; align-items: start; gap: 24px }
.pro-panel .pavatar { width: 84px; height: 84px; flex: 0 0 auto; position: relative }
.pro-panel .pavatar img {
    width: 84px; height: 84px; border-radius: 999px; object-fit: cover;
    border: 3px solid #fff; box-shadow: var(--shadow-soft);
}
.pro-panel .pavatar .ini {
    width: 84px; height: 84px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, var(--primary), var(--primary-2)); color: #fff;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 34px;
}
.pro-panel .pname { display: flex; align-items: center; gap: 8px }
.pro-panel .verif { color: var(--primary); display: inline-flex }
.pro-panel .prole { font-size: 13px; color: var(--muted-2); margin-top: 3px }
.pro-panel .pdesc { margin-top: 12px; line-height: 1.6 }

.pro-panel .pfacts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px }
.pro-panel .pf {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; color: var(--muted-3);
}
.pro-panel .pf svg { color: var(--primary); flex: 0 0 auto }

.pro-panel .pstats { margin-top: 20px }

/* Por qué elegirme: bloque de acento, fondo completo */
.pwhy {
    display: flex; gap: 13px; align-items: flex-start; margin-top: 16px;
    background: var(--wine); color: #fff; border-radius: 20px; padding: 18px 22px;
    font-size: 14px; line-height: 1.6;
}
.pwhy .ico { color: var(--pink); flex: 0 0 auto; margin-top: 1px }

/* ---------- Otros servicios del profesional ---------- */
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px }
.mini {
    display: flex; flex-direction: column; gap: 4px;
    background: #fff; border: 1px solid var(--line-soft); border-radius: 16px; padding: 16px;
    transition: border-color .2s, transform .2s;
}
.mini:hover { border-color: var(--primary); transform: translateY(-2px) }
.mini .mn { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 15px; color: var(--ink) }
.mini .mc { font-size: 12.5px; color: var(--muted-2) }
.mini .mp { font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--primary); margin-top: 6px }

/* ---------- Preguntas frecuentes, numeradas y con aire ---------- */
.faq-num summary {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 22px; cursor: pointer; list-style: none;
    font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 15.5px;
}
.faq-num summary .qn {
    font-size: 12px; font-weight: 700; color: var(--primary);
    background: var(--lilac); border-radius: 8px; padding: 4px 8px; flex: 0 0 auto;
}
.faq-num summary .qt { flex: 1 }
.faq-num .qa { padding: 0 22px 20px 58px }
.faq-num .qa p { color: var(--muted); line-height: 1.65; font-size: 14.5px }

/* ---------- Reserva: cupones y días ---------- */
.booking .days .day {
    background: #fff; border: 1px solid var(--line-mid); border-radius: 12px;
    padding: 9px 6px; text-align: center; font-size: 12.5px; color: var(--muted-3);
}
.booking .bcoupons { margin-top: 18px; border-top: 1px solid var(--line-soft); padding-top: 16px }
.booking .bclabel { font-size: 12px; color: var(--muted-2); margin-bottom: 9px }
.booking .coupon {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 6px 6px 0;
    background: var(--lilac); border-radius: 10px; padding: 7px 11px; font-size: 13px;
}
.booking .coupon b { font-family: 'Outfit', sans-serif; letter-spacing: .04em; color: var(--ink) }
.booking .coupon i { font-style: normal; color: var(--primary); font-weight: 600 }

/* ---------- Relacionados: el título respira antes de las tarjetas ---------- */
.related-head { margin-bottom: 26px }
.related-head h2 { font-size: 26px; margin-bottom: 8px }
.related-head p { color: var(--muted); font-size: 14.5px }

/* ---------- Pie con más aire ---------- */
.site-footer { padding-top: 100px; padding-bottom: 56px }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
    .detail-top { padding: 18px 40px 0 }
    .quick-strip { grid-template-columns: repeat(2, 1fr) }
    .mini-grid { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 760px) {
    .detail-top { padding: 16px 20px 0 }
    .quick-strip { grid-template-columns: 1fr }
    .place-grid, .mini-grid { grid-template-columns: 1fr }
    .sd { grid-template-columns: 1fr; gap: 8px }
    .pro-panel { grid-template-columns: 1fr }
    .faq-num .qa { padding-left: 22px }
    .site-footer { padding-top: 70px; padding-bottom: 40px }
}


/* ---------- Reseñas verificadas ---------- */
.rev-top { align-items: center; gap: 34px }

.rev-score {
    background: #fff; border: 1px solid var(--line-soft); border-radius: 22px;
    padding: 26px 30px; text-align: center; box-shadow: var(--shadow-soft);
}
.rev-score .n {
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 54px;
    letter-spacing: -.04em; line-height: 1; color: var(--ink);
}
.rev-score .s { margin: 10px 0 8px; font-size: 15px; letter-spacing: 2px; color: var(--line-mid) }
.rev-score .s .on { color: var(--orange) }
.rev-score .c { font-size: 12.5px; color: var(--muted-2) }

.rev-bars { display: flex; flex-direction: column; gap: 9px; flex: 1 }
.rev-bars .bar { display: grid; grid-template-columns: 34px 1fr 40px; align-items: center; gap: 12px }
.rev-bars .bar .lb { font-size: 13px; color: var(--muted-3); display: flex; align-items: center; gap: 3px }
.rev-bars .bar .lb i { font-style: normal; color: var(--orange); font-size: 11px }
.rev-bars .bar .tr { height: 9px; border-radius: 999px; background: var(--line-soft); overflow: hidden }
.rev-bars .bar .fi { display: block; height: 100%; border-radius: 999px; background: var(--primary) }
.rev-bars .bar .vn { font-size: 12.5px; color: var(--muted-2); text-align: right }

/* ---------- Tarjetas de reseña ---------- */
.rev-list { display: flex; flex-direction: column; gap: 12px; margin-top: 26px }
.rev {
    background: #fff; border: 1px solid var(--line-soft); border-radius: 20px; padding: 20px 24px;
}
.rev .rh { display: flex; align-items: center; gap: 13px; margin-bottom: 12px }
.rev .ravatar {
    width: 42px; height: 42px; border-radius: 999px; flex: 0 0 auto; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--lilac); color: var(--primary);
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 17px;
}
.rev .ravatar img { width: 100%; height: 100%; object-fit: cover }
.rev .rmeta { display: flex; flex-direction: column; flex: 1; min-width: 0 }
.rev .rn { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 15px; color: var(--ink) }
.rev .rd { font-size: 12.5px; color: var(--muted-2); margin-top: 2px }
.rev .rs { flex: 0 0 auto; letter-spacing: 1px; font-size: 13px; color: var(--line-mid) }
.rev .rs .on { color: var(--orange) }
.rev p { color: var(--muted); line-height: 1.65; font-size: 14.5px }

/* Ver más: interruptor de CSS puro, funciona sin JavaScript. */
.rev-toggle { position: absolute; opacity: 0; pointer-events: none }
.rev.is-extra { display: none }
.rev-toggle:checked ~ .rev-list .rev.is-extra { display: block }
.rev-more { margin-top: 16px; cursor: pointer; width: 100% }
.rev-more .menos { display: none }
.rev-toggle:checked ~ .rev-more .mas { display: none }
.rev-toggle:checked ~ .rev-more .menos { display: inline }


@media (max-width: 760px) {
    .rev-top { flex-direction: column; align-items: stretch; gap: 22px }
    .rev-score { padding: 22px }
}

/* ---------- Horarios: línea de tiempo ----------
   Cada bloque va colocado según su hora real, así la forma del gráfico ya
   cuenta la disponibilidad sin tener que leer los rangos. */
.timeline {
    background: #fff; border: 1px solid var(--line-soft); border-radius: 20px;
    padding: 20px 24px 16px; margin-top: 18px;
}

.tl-ruler, .tl-row { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 14px }

.tl-ruler { height: 22px; margin-bottom: 6px }
.tl-ruler .tl-track { position: relative; height: 100% }
.tl-tick {
    position: absolute; top: 0; transform: translateX(-50%);
    font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums;
}

.tl-row { height: 38px }
.tl-row + .tl-row { margin-top: 4px }
.tl-day {
    font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 12.5px;
    color: var(--muted-3); text-transform: capitalize;
}

.tl-track {
    position: relative; height: 26px; border-radius: 999px;
    background: var(--line-soft);
    /* Rayas suaves cada hora, para leer la escala sin más adornos. */
    /* Una raya por hora: el número lo pone la vista, así el fondo siempre
       casa con la regla de arriba sea cual sea el horario del servicio. */
    background-image: repeating-linear-gradient(to right,
        transparent 0, transparent calc(100% / var(--horas, 12) - 1px),
        rgba(255, 255, 255, .9) calc(100% / var(--horas, 12) - 1px),
        rgba(255, 255, 255, .9) calc(100% / var(--horas, 12)));
}

.tl-block {
    position: absolute; top: 0; bottom: 0;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    border-radius: 999px; display: flex; align-items: center; justify-content: center;
    color: #fff; overflow: hidden; transition: filter .2s, transform .2s;
}
.tl-block b {
    font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 11px;
    letter-spacing: -.01em; white-space: nowrap; padding: 0 4px;
}
.tl-block:hover { filter: brightness(1.08); transform: scaleY(1.12) }

.tl-row.is-off .tl-track { background: #F7F6FB; background-image: none }
.tl-none {
    position: absolute; inset: 0; display: flex; align-items: center; padding-left: 14px;
    font-size: 12px; color: var(--muted-2);
}

.tl-legend {
    display: flex; align-items: center; gap: 9px; margin-top: 14px;
    font-size: 13px; color: var(--muted-3);
}
.tl-key {
    width: 26px; height: 10px; border-radius: 999px; flex: 0 0 auto;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
}

@media (max-width: 760px) {
    .timeline { padding: 16px 14px 12px }
    .tl-ruler, .tl-row { grid-template-columns: 34px 1fr; gap: 9px }
    .tl-block b { display: none }
    .tl-tick { font-size: 10px }
}

/* ============================================================
   Listado de servicios
   ============================================================ */

.results-head .results-title {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 40px; flex-wrap: wrap; margin-bottom: 20px;
}
.results-head .results-title h1 { font-size: 34px; font-weight: 700; margin-bottom: 8px }
.results-head .results-title p { font-size: 15px; color: var(--muted) }

/* El buscador es un formulario de verdad, no un adorno */
.results-head .searchbar { max-width: 820px; display: flex; align-items: center; gap: 10px }
.results-head .searchbar input[type=text] { flex: 1; min-width: 0 }
.results-head .searchbar .btn { flex: 0 0 auto }

/* ---------- Barra lateral de filtros ---------- */
.filters-head { display: flex; justify-content: space-between; align-items: center }
.filters-head a { font-size: 13px }
.filters .filter-group select.control { padding: 10px 12px; font-size: 14px; border-radius: 12px }
.filters-apply { margin-top: 20px }

/* El punto del radio se ve como el cuadro del prototipo, pero redondo:
   así se entiende que solo se puede elegir uno. */
.filter-list .check input[type=radio] { border-radius: 999px }
.filter-list .check input[type=radio]:checked::after { content: ''; width: 7px; height: 7px; border-radius: 999px; background: #fff }
.filter-list .check:hover { color: var(--ink) }

/* ---------- Barra de resultados ---------- */
.results-count strong { font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--ink) }
.sort .control { width: auto; padding: 9px 12px; font-size: 14px; border-radius: 12px }

/* Desplegable propio del «Ordenar por»: el select nativo se queda en el
   formulario (oculto) y se dibuja encima una caja con el mismo aspecto que
   los selects del panel, para no depender de la lista del sistema. */
.hm-select { position: relative; min-width: 170px }
.hm-select > select { position: absolute; width: 1px; height: 1px; margin: -1px; opacity: 0; pointer-events: none }
.hm-select-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; padding: 9px 12px;
    background: #fff; border: 1px solid var(--line-input); border-radius: 12px;
    font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}
.hm-select-trigger svg { flex: 0 0 auto; color: var(--muted-2); transition: transform .2s }
.hm-select-trigger:hover { border-color: var(--line-mid) }
.hm-select.open .hm-select-trigger { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(91, 75, 224, .12) }
.hm-select.open .hm-select-trigger svg { transform: rotate(180deg) }
.hm-select-panel {
    display: none; position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0;
    padding: 6px; background: #fff; border: 1px solid var(--line-mid); border-radius: 12px;
    box-shadow: 0 14px 34px rgba(20, 19, 48, .16);
    max-height: 280px; overflow-y: auto;
}
.hm-select.open .hm-select-panel { display: block }
.hm-select-option {
    display: block; width: 100%; padding: 11px 12px;
    border: 0; border-radius: 8px; background: none;
    font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer;
}
.hm-select-option:hover { background: var(--lilac) }
.hm-select-option.selected { background: var(--primary); color: #fff }

/* Los filtros de la barra lateral («Precio», «Proveedores») usan el mismo
   desplegable, con las medidas que ya tenian sus selects. */
.filters .hm-select { min-width: 0 }
.filters .hm-select-trigger { padding: 10px 12px }
/* Hay nombres de proveedor largos: la opcion se parte en dos lineas antes que
   salirse de la caja. */
.hm-select-option { white-space: normal; line-height: 1.35 }

/* ---------- Paginación ---------- */
.page-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 12px;
    border: 1px solid var(--line-mid); border-radius: 12px;
    font-size: 14px; color: var(--muted-3); background: #fff;
    transition: background .2s, color .2s, border-color .2s;
}

/* ---------- Sin resultados ---------- */
.empty {
    text-align: center; padding: 60px 20px;
    background: #fff; border: 1px solid var(--line-soft); border-radius: 22px;
}
.empty .big { color: var(--primary); display: flex; justify-content: center }

@media (max-width: 1080px) {
    .filters-apply { position: sticky; bottom: 12px }
}
@media (max-width: 760px) {
    .results-head .results-title h1 { font-size: 26px }
    .results-head .searchbar { flex-wrap: wrap }
    .results-head .searchbar .btn { width: 100% }
}

/* ---------- Cuatro tarjetas por fila ---------- */
.results-grid { grid-template-columns: repeat(4, 1fr) }

@media (max-width: 1480px) { .results-grid { grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 1080px) { .results-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 620px)  { .results-grid { grid-template-columns: 1fr } }

/* ---------- Categorías: diez y el resto a demanda ---------- */
.cats-toggle { position: absolute; opacity: 0; pointer-events: none }
.filter-list .check.is-extra { display: none }
.cats-toggle:checked ~ .filter-list .check.is-extra { display: flex }
.cats-more {
    display: inline-block; margin-top: 12px; cursor: pointer;
    font-size: 13px; color: var(--primary); font-weight: 500;
}
.cats-more:hover { text-decoration: underline }
.cats-more .menos { display: none }
.cats-toggle:checked ~ .cats-more .mas { display: none }
.cats-toggle:checked ~ .cats-more .menos { display: inline }

/* ---------- Selector de ciudad ---------- */
.hm-city { display: flex; align-items: center; min-width: 0 }
.hm-city-btn {
    display: flex; align-items: center; gap: 9px; width: 100%;
    background: none; border: 0; padding: 0; cursor: pointer;
    font-size: 15px; color: var(--ink); text-align: left;
}
.hm-city-btn svg { color: var(--primary); flex: 0 0 auto }
.hm-city-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.hm-city-btn:hover { color: var(--primary) }

/* En la barra lateral se ve como un campo más */
.filters .hm-city-btn {
    background: #fff; border: 1px solid var(--line-input); border-radius: 12px;
    padding: 10px 12px; font-size: 14px;
}
.filters .hm-city-btn:hover { border-color: var(--primary-2) }
.searchbar .hm-city { width: 190px; flex: 0 0 auto }

/* ---------- Ventana modal ---------- */
.hm-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px }
.hm-modal[hidden] { display: none }
.hm-modal-back { position: absolute; inset: 0; background: rgba(20, 19, 48, .55); backdrop-filter: blur(3px) }
.hm-modal-box {
    position: relative; background: var(--bg); border-radius: 24px;
    width: 100%; max-width: 560px; max-height: 88vh; display: flex; flex-direction: column;
    box-shadow: var(--shadow-deep); overflow: hidden;
}
.hm-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid var(--line);
}
.hm-modal-head h3 { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 18px }
.hm-modal-x { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--muted-2); cursor: pointer }
.hm-modal-x:hover { color: var(--ink) }
.hm-modal-body { padding: 20px 24px; overflow-y: auto }
.hm-modal-foot {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 16px 24px; border-top: 1px solid var(--line);
}

.hm-city-results { list-style: none; margin: 12px 0 0; max-height: 190px; overflow-y: auto }
.hm-city-results li + li { border-top: 1px solid var(--line-soft) }
.hm-city-results button {
    display: flex; align-items: baseline; gap: 10px; width: 100%;
    background: none; border: 0; padding: 11px 12px; text-align: left; cursor: pointer; border-radius: 10px;
}
.hm-city-results button:hover { background: var(--lilac) }
.hm-city-results b { font-weight: 600; font-size: 14.5px; color: var(--ink) }
.hm-city-results span { font-size: 12.5px; color: var(--muted-2) }
.hm-city-results .vacio { padding: 14px 12px; font-size: 13.5px; color: var(--muted-2) }

.hm-city-hint { font-size: 12.5px; color: var(--muted-2); margin: 18px 0 10px }
.hm-city-map { height: 260px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line) }

/* ============================================================
   Proveedores
   ============================================================ */

/* ---------- Tarjeta de proveedor ---------- */
.provider-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: #fff; border: 1px solid var(--line-soft); border-radius: 22px;
    padding: 26px 20px 20px; color: var(--ink);
    transition: box-shadow .25s, transform .25s, border-color .2s;
}
.provider-card:hover {
    box-shadow: var(--shadow-card); transform: translateY(-4px);
    border-color: var(--line-mid); color: var(--ink);
}
.pc-avatar {
    width: 72px; height: 72px; border-radius: 999px; overflow: hidden; margin-bottom: 14px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, var(--primary), var(--primary-2)); color: #fff;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 28px;
}
.pc-avatar img { width: 100%; height: 100%; object-fit: cover }
.pc-name {
    font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 16.5px;
    display: flex; align-items: center; gap: 6px; justify-content: center; text-wrap: balance;
}
.pc-name .verif { color: var(--primary); display: inline-flex; flex: 0 0 auto }
.pc-type { font-size: 12.5px; color: var(--muted-2); margin-top: 3px }
.pc-stats { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px }
.pc-rate { color: var(--orange); font-weight: 600 }
.pc-dim { color: var(--muted-2) }
.pc-foot {
    display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid #F0EEF8;
    width: 100%; font-size: 12.5px; color: var(--muted-3);
}
.pc-city { display: inline-flex; align-items: center; gap: 5px }
.pc-city svg { color: var(--primary) }
.pc-services { font-weight: 500 }

/* ---------- Ficha del profesional ---------- */
.prov-hero {
    position: relative; overflow: hidden;
    background: var(--ink); color: #fff; border-radius: 26px;
    padding: 34px 38px; display: flex; gap: 26px; align-items: center;
}
.prov-hero > *:not(.ring) { position: relative; z-index: 1 }
.prov-hero .ring {
    position: absolute; right: -70px; top: -80px; width: 260px; height: 260px;
    border-radius: 999px; border: 44px solid var(--primary); opacity: .5; pointer-events: none;
}
.ph-avatar { width: 96px; height: 96px; flex: 0 0 auto }
.ph-avatar img {
    width: 96px; height: 96px; border-radius: 999px; object-fit: cover;
    border: 3px solid rgba(255, 255, 255, .18);
}
.ph-avatar .ini {
    width: 96px; height: 96px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .12); color: #fff;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 38px;
}
.ph-info h1 {
    font-size: 30px; font-weight: 700; color: #fff;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ph-info h1 .verif { color: var(--mint); display: inline-flex }
.ph-role { font-size: 14px; color: rgba(255, 255, 255, .68); margin-top: 5px }
.ph-facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 16px }
.ph-facts .pf {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13.5px; color: rgba(255, 255, 255, .78);
}
.ph-facts .pf b { color: #fff; font-weight: 600 }
.ph-facts .pf svg { color: var(--primary-2) }

/* ---------- Etiquetas del perfil ---------- */
.ptags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px }
.ptags.mt { margin-top: 12px }
.ptags .tag {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; background: var(--lilac); color: var(--primary); font-weight: 500;
    border: 0; border-radius: 999px; padding: 7px 14px;
}
.ptags a.tag:hover { background: var(--primary); color: #fff }
.ptags .tag b { font-weight: 700; opacity: .65 }
.detail-section .sub.mt { margin-top: 14px }

/* ---------- Instalación principal ---------- */
.place .pn em {
    font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    background: var(--mint); color: var(--mint-ink); border-radius: 999px; padding: 3px 8px; margin-left: 7px;
}

/* ---------- Días que trabaja ---------- */
.weekstrip { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap }
.weekstrip .wd {
    min-width: 62px; text-align: center; padding: 12px 8px; border-radius: 14px;
    background: #F7F6FB; color: var(--muted-2); font-size: 13px;
    font-family: 'Outfit', sans-serif; font-weight: 600;
}
.weekstrip .wd.is-on { background: var(--primary); color: #fff }

/* ---------- Encabezado de sección con enlace ---------- */
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap }
.sec-head a { font-size: 14px; white-space: nowrap }

/* Rejilla de tres dentro de una sección */
.detail-section .results-grid.grid-3 { grid-template-columns: repeat(3, 1fr); margin-top: 18px }
@media (max-width: 1080px) { .detail-section .results-grid.grid-3 { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 620px)  { .detail-section .results-grid.grid-3 { grid-template-columns: 1fr } }

/* ---------- Servicio al que se refiere una opinión ---------- */
.rev-serv { display: inline-block; font-size: 12.5px; color: var(--primary); margin-bottom: 8px }

/* ---------- Tarjeta lateral del profesional ---------- */
.prov-side-name { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -.02em }
.prov-contact { margin-top: 18px; border-top: 1px solid var(--line-soft); padding-top: 16px; display: flex; flex-direction: column; gap: 10px }
.prov-contact a { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--muted-3) }
.prov-contact a:hover { color: var(--primary) }
.prov-contact svg { color: var(--primary); flex: 0 0 auto }

@media (max-width: 760px) {
    .prov-hero { flex-direction: column; text-align: center; padding: 28px 22px }
    .ph-facts { justify-content: center }
    .ph-info h1 { justify-content: center; font-size: 24px }
}

/* ---------- Secciones emparejadas ----------
   Dos bloques cortos comparten fila para que no queden dos franjas casi
   vacías seguidas. Con auto-fit, si solo hay uno ocupa el ancho entero. */
.detail-pair {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px; align-items: start;
}
.detail-pair > div > .ptags:first-of-type { margin-top: 0 }

/* ============================================================
   Categorías
   ============================================================ */

.cat-wrap, .blog-wrap { padding-top: 34px; padding-bottom: 90px }

.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px }
@media (max-width: 1480px) { .cat-grid { grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 1080px) { .cat-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 620px)  { .cat-grid { grid-template-columns: 1fr } }

/* Tarjeta sobria: fondo blanco y filete, como el resto del sistema. El color
   se reserva para el icono, que es lo que distingue una categoría de otra. */
.cat-card {
    display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px;
    background: #fff; border: 1px solid var(--line-soft); border-radius: 16px;
    padding: 14px 16px; color: var(--ink);
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.cat-card:hover {
    border-color: var(--primary); box-shadow: var(--shadow-soft);
    transform: translateY(-2px); color: var(--ink);
}

.cc-media {
    width: 48px; height: 48px; border-radius: 13px; overflow: hidden; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--lilac);
}
.cc-media img { width: 100%; height: 100%; object-fit: cover }
.cc-ini {
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 19px; color: var(--primary);
}

.cc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.cc-name {
    font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 15.5px; letter-spacing: -.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-count { font-size: 12.5px; color: var(--muted-2) }

.cc-go { color: var(--line-mid); transition: transform .2s, color .2s }
.cat-card:hover .cc-go { color: var(--primary); transform: translateX(3px) }

/* ============================================================
   Blog
   ============================================================ */

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
@media (max-width: 1080px) { .blog-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 620px)  { .blog-grid { grid-template-columns: 1fr } }

.blog-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line-soft); border-radius: 22px;
    overflow: hidden; color: var(--ink);
    transition: box-shadow .25s, transform .25s;
}
.blog-card:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); color: var(--ink) }
.bc-thumb { position: relative; height: 186px; overflow: hidden; display: block }
.bc-thumb img { width: 100%; height: 100%; object-fit: cover }
.bc-thumb .badge {
    position: absolute; left: 14px; top: 14px;
    background: var(--mint); color: var(--mint-ink);
    border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 500;
}
.bc-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1 }
.bc-meta { font-size: 12.5px; color: var(--muted-2) }
.bc-title {
    font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 17px;
    letter-spacing: -.01em; line-height: 1.3; margin: 8px 0 8px;
}
.bc-excerpt { font-size: 14px; color: var(--muted); line-height: 1.6; flex: 1 }
.bc-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid #F0EEF8;
    font-size: 12.5px; color: var(--muted-3);
}
.bc-views { display: inline-flex; align-items: center; gap: 5px }
.bc-views svg { color: var(--muted-2) }

/* ---------- Entrada destacada ---------- */
.blog-hero {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; margin-bottom: 30px;
    background: #fff; border: 1px solid var(--line-soft); border-radius: 26px;
    overflow: hidden; color: var(--ink); transition: box-shadow .25s;
}
.blog-hero:hover { box-shadow: var(--shadow-card); color: var(--ink) }
.bh-media { position: relative; min-height: 300px; overflow: hidden }
.bh-media img { width: 100%; height: 100%; object-fit: cover }
.bh-body { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center }
.bh-tag {
    align-self: flex-start; background: var(--lilac); color: var(--primary);
    border-radius: 999px; padding: 5px 13px; font-size: 12px; font-weight: 500; margin-bottom: 14px;
}
.bh-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 30px; letter-spacing: -.03em; line-height: 1.15 }
.bh-excerpt { font-size: 15px; color: var(--muted); line-height: 1.65; margin-top: 14px }
.bh-meta { font-size: 13px; color: var(--muted-2); margin-top: 18px }
@media (max-width: 900px) {
    .blog-hero { grid-template-columns: 1fr }
    .bh-media { min-height: 220px }
    .bh-body { padding: 26px }
}

/* ---------- Artículo ---------- */
.post { max-width: 760px; margin: 0 auto; padding: 10px 40px 60px }
.post-head h1 { font-size: 38px; font-weight: 700; line-height: 1.12; margin-bottom: 18px; text-wrap: balance }
.post-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    font-size: 13.5px; color: var(--muted-2);
}
.post-meta .dot { width: 3px; height: 3px; border-radius: 999px; background: var(--line-mid) }
.pm-author { display: inline-flex; align-items: center; gap: 9px; color: var(--muted-3) }
.pm-avatar {
    width: 30px; height: 30px; border-radius: 999px; overflow: hidden; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--lilac); color: var(--primary);
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13px;
}
.pm-avatar img { width: 100%; height: 100%; object-fit: cover }

.post-media { margin: 28px 0; border-radius: 22px; overflow: hidden; max-height: 440px }
.post-media img { width: 100%; height: 100%; object-fit: cover }

.post-body { font-size: 16.5px; line-height: 1.75; color: var(--muted) }
.post-body > * + * { margin-top: 18px }
.post-body h2, .post-body h3 { color: var(--ink); margin-top: 34px }
.post-body h2 { font-size: 25px } .post-body h3 { font-size: 20px }
.post-body img { border-radius: 16px; margin: 24px 0 }
.post-body ul, .post-body ol { padding-left: 22px }
.post-body li + li { margin-top: 8px }
.post-body a { text-decoration: underline }
.post-body blockquote {
    border-left: 3px solid var(--primary); padding: 4px 0 4px 20px;
    color: var(--muted-3); font-style: italic;
}

.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px }
.post-tags .tag {
    background: var(--lilac); color: var(--primary); border-radius: 999px;
    padding: 6px 14px; font-size: 13px; font-weight: 500;
}

.post-author {
    display: flex; gap: 18px; margin-top: 40px; padding-top: 30px;
    border-top: 1px solid var(--line);
}
.pa-avatar {
    width: 60px; height: 60px; border-radius: 999px; overflow: hidden; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, var(--primary), var(--primary-2)); color: #fff;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 24px;
}
.pa-avatar img { width: 100%; height: 100%; object-fit: cover }
.pa-name { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 17px }
.pa-role { font-size: 13px; color: var(--muted-2); margin-top: 2px }
.post-author p { font-size: 14.5px; color: var(--muted); line-height: 1.65; margin-top: 10px }

@media (max-width: 760px) {
    .post { padding: 6px 20px 50px }
    .post-head h1 { font-size: 28px }
    .cat-card { grid-template-columns: 60px 1fr auto; gap: 14px }
    .cc-media { width: 60px; height: 60px; border-radius: 14px }
}

/* ---------- Migas del artículo ----------
   El texto del artículo va a 760px centrado; las migas se alinean con él
   en vez de irse al borde del contenedor ancho. */
.detail-top.post-top { max-width: 760px; padding-left: 40px; padding-right: 40px }
@media (max-width: 760px) { .detail-top.post-top { padding-left: 20px; padding-right: 20px } }

/* ============================================================
   Portada
   Medidas tomadas del diseño original (public/design/index.html):
   secciones a 96px de aire superior, titulares de 44px, tarjetas de
   categoría de 250×280, mosaico de 330px de alto.
   ============================================================ */

.hm-sec { max-width: var(--wrap); margin: 0 auto; padding: 96px 40px 0 }
.hm-sec.tight { padding-top: 64px }
.hm-sec.last { padding-bottom: 110px }

/* ---------- Hero ---------- */
.hero { padding-top: 70px }
.hero-top { text-align: center; max-width: 900px; margin: 0 auto }
.hero-badge {
    display: inline-flex; gap: 8px; align-items: center; font-size: 13px;
    color: var(--primary); background: var(--lilac);
    padding: 7px 14px; border-radius: 999px; margin-bottom: 26px;
}
.hero h1 {
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 76px;
    line-height: 1.03; letter-spacing: -.035em; margin: 0 0 22px;
}
.hero-sub {
    font-size: 18px; line-height: 1.6; color: var(--muted);
    max-width: 560px; margin: 0 auto 34px; text-wrap: pretty;
}

.hero-search {
    display: flex; gap: 8px; align-items: center; background: #fff;
    border: 1px solid var(--line-input); border-radius: 999px;
    padding: 8px 8px 8px 20px; max-width: 660px; margin: 0 auto;
    box-shadow: var(--shadow-soft);
}
.hero-search input[type=text] {
    border: 0; outline: 0; font-size: 15px; flex: 1; min-width: 0;
    background: transparent; color: var(--ink);
}
.hero-search .sep { width: 1px; height: 26px; background: var(--line); flex: 0 0 auto }
.hero-search .hm-city { width: 130px; flex: 0 0 auto }
.hero-search .btn { flex: 0 0 auto; padding: 13px 26px }

.hero-chips {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
    margin-top: 22px; font-size: 13px; color: var(--muted-3);
}
.hero-chips a {
    background: #fff; border: 1px solid var(--line);
    padding: 5px 12px; border-radius: 999px; color: inherit;
}
.hero-chips a:hover { border-color: var(--primary); color: var(--primary) }

/* Mosaico */
.hero-mosaic {
    display: grid; grid-template-columns: 1.25fr 1fr 1.25fr; gap: 14px;
    margin-top: 56px; height: 330px;
}
.hero-mosaic .hm-col { display: grid; grid-template-rows: 1fr auto; gap: 14px; min-height: 0 }
.hm-tile { position: relative; border-radius: 22px; overflow: hidden; min-height: 0 }
.hm-tile img { width: 100%; height: 100%; object-fit: cover }
.hm-cap {
    position: absolute; inset: auto 0 0 0; padding: 22px; color: #fff;
    background: linear-gradient(transparent, rgba(20, 19, 48, .8));
    font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 19px; line-height: 1.2;
}
.hm-stat {
    background: var(--primary); color: #fff; border-radius: 22px;
    padding: 18px 20px; display: flex; align-items: center; gap: 14px;
}
.hm-stat .v { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 32px; letter-spacing: -.03em }
.hm-stat .l { font-size: 13px; line-height: 1.35; opacity: .9 }

/* ---------- Encabezado de sección ---------- */
.sec-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 60px; margin-bottom: 32px }
.sec-top.simple { align-items: center; margin-bottom: 24px }
.sec-top h2 {
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 44px;
    letter-spacing: -.03em; line-height: 1.08; margin: 0;
}
.sec-top h2.sm { font-size: 32px; letter-spacing: -.025em }
.sec-top .eyebrow { font-size: 13px; color: var(--primary); margin-bottom: 12px }
.sec-aside { display: flex; align-items: center; gap: 14px }
.sec-aside.col { display: block; max-width: 360px }
.sec-aside p { font-size: 15px; color: var(--muted); max-width: 330px; margin: 0; text-wrap: pretty }
.sec-aside.col p { margin-bottom: 16px; max-width: 100% }
.sec-tags { display: flex; gap: 8px; margin-bottom: 14px }
.sec-tags span {
    font-size: 12px; border: 1px solid var(--line-mid); border-radius: 999px;
    padding: 4px 11px; color: var(--muted);
}

.carousel-nav { display: flex; gap: 8px; flex: 0 0 auto }
.carousel-nav button {
    width: 40px; height: 40px; border-radius: 999px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, color .2s, border-color .2s;
}
.carousel-nav .cn-prev { border: 1px solid var(--line-mid); background: transparent; color: var(--ink) }
.carousel-nav .cn-prev:hover { background: var(--ink); color: #fff; border-color: var(--ink) }
.carousel-nav .cn-next { background: var(--ink); color: #fff; border: 0 }
.carousel-nav .cn-next:hover { background: var(--primary) }
.carousel-nav.light .cn-prev { border-color: rgba(255, 255, 255, .25); color: #fff }
.carousel-nav.light .cn-prev:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25) }
.carousel-nav.light .cn-next { background: var(--primary) }
.carousel-nav.light .cn-next:hover { background: var(--primary-2) }

/* ---------- Carruseles ---------- */
.carousel {
    display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth;
    padding-bottom: 6px; scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none }

.cat-tile {
    flex: 0 0 250px; height: 280px; border-radius: 20px; overflow: hidden;
    position: relative; padding: 5px; display: flex; flex-direction: column;
    transition: transform .25s; color: inherit;
}
.cat-tile:hover { transform: translateY(-6px); color: inherit }
.ct-name {
    padding: 12px 14px; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 16px;
}
.ct-media {
    flex: 1; margin: 0 5px 5px; border-radius: 16px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .35); min-height: 0;
}
.ct-media img { width: 100%; height: 100%; object-fit: cover }
.ct-ini { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 48px; opacity: .6 }

.feat-tile {
    flex: 0 0 300px; background: #fff; border: 1px solid var(--line-soft);
    border-radius: 20px; padding: 10px; display: flex; gap: 12px; align-items: center;
    transition: transform .25s; color: inherit;
}
.feat-tile:hover { transform: translateY(-4px); color: inherit }
.ft-media {
    width: 88px; height: 88px; border-radius: 14px; overflow: hidden; flex: 0 0 auto;
    position: relative; display: block;
}
.ft-media img { width: 100%; height: 100%; object-fit: cover }
.ft-body { display: flex; flex-direction: column; min-width: 0 }
.ft-name { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 16px; margin-bottom: 4px }
.ft-meta { font-size: 13px; color: var(--muted-2); margin-bottom: 8px }
.ft-price { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 17px; color: var(--primary) }

/* ---------- Bento de cifras ---------- */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.bn-card { border-radius: 22px; padding: 34px; position: relative; overflow: hidden }
.bn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.bn-pair .bn-card { padding: 30px }

.bn-white { background: #fff }
.bn-white h2 {
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 34px;
    letter-spacing: -.03em; line-height: 1.12; margin: 0 0 14px;
}
.bn-white p { font-size: 15px; color: var(--muted); margin: 0 0 26px }
.bn-acts { display: flex; gap: 10px; flex-wrap: wrap }

.bn-primary { background: var(--primary); color: #fff }
.bn-primary .ring {
    position: absolute; right: -40px; top: 10px; width: 230px; height: 230px;
    border: 44px solid var(--mint); border-radius: 999px; opacity: .9;
}
.bn-inner { position: relative }
.bn-num { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 66px; line-height: 1; letter-spacing: -.04em }
.bn-num.sm { font-size: 52px }
.bn-txt { font-size: 14px; opacity: .85; margin-top: 10px; max-width: 220px }

.bn-orange { background: var(--orange); color: #fff }
.bn-orange .bn-txt { opacity: .92; margin-top: 12px }
.bn-pink { background: var(--pink); color: var(--pink-ink) }
.bn-pink .bn-txt { opacity: 1; margin-top: 12px }
.bn-mint { background: var(--mint); display: flex; align-items: flex-end }
.bn-quote {
    font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 24px;
    line-height: 1.2; letter-spacing: -.02em; color: var(--mint-ink);
}
.bn-wine { background: var(--wine); color: #fff }
.bn-head { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 24px; letter-spacing: -.02em; margin-bottom: 16px }
.bn-list { display: flex; flex-direction: column; gap: 9px; font-size: 14px; opacity: .85 }

/* ---------- Testimonios ---------- */
.test-eyebrow { text-align: center; font-size: 14px; color: var(--muted); margin-bottom: 26px }
.testimonial { position: relative; background: var(--ink); border-radius: 26px; padding: 44px; color: #fff }
.ts-item { display: none; grid-template-columns: 300px 1fr; gap: 48px; align-items: center }
.ts-item.is-on { display: grid; animation: tsIn .5s var(--ease-ds-out, ease) both }
@keyframes tsIn { from { opacity: 0 } to { opacity: 1 } }

.ts-photo { position: relative }
.ts-back { position: absolute; left: 26px; top: 16px; width: 100%; height: 100%; border-radius: 20px }
.ts-back.pink { background: var(--pink); transform: rotate(4deg) }
.ts-back.violet { background: var(--primary-2); left: 13px; top: 8px; transform: rotate(2deg) }
.ts-photo img { position: relative; width: 100%; height: 270px; object-fit: cover; border-radius: 20px }
.ts-ini {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 100%; height: 270px; border-radius: 20px;
    background: rgba(255, 255, 255, .1);
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 72px;
}
.ts-body p {
    font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 26px; line-height: 1.4;
    letter-spacing: -.02em; margin: 0 0 28px; text-wrap: pretty;
}
.ts-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px }
.ts-name { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 18px }
.ts-meta { font-size: 14px; opacity: .6; margin-top: 2px }

.test-stats {
    display: flex; justify-content: center; gap: 44px; flex-wrap: wrap;
    margin-top: 26px; font-size: 14px; color: var(--muted);
}
.test-stats strong { color: var(--ink) }

/* ---------- Banda de la app ---------- */
.appband {
    background: var(--lilac); border-radius: 26px; padding: 52px;
    display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: center; overflow: hidden;
}
.appband h2 {
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 42px;
    letter-spacing: -.03em; line-height: 1.1; margin: 0 0 16px;
}
.appband p { font-size: 16px; color: var(--muted); max-width: 420px; margin: 0 0 28px; text-wrap: pretty }
.app-btns { display: flex; gap: 12px; flex-wrap: wrap }
.app-btns .btn { border-radius: 14px }
.app-shot { position: relative; height: 300px }
.as-frame {
    position: absolute; inset: 0; background: var(--ink); border-radius: 28px;
    padding: 10px; box-shadow: var(--shadow-deep);
}
.as-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px }

/* ---------- Cómo funciona ---------- */
.steps-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center }
.steps-title {
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 42px;
    letter-spacing: -.03em; line-height: 1.1; margin: 0 0 34px;
}
.steps { display: flex; flex-direction: column; gap: 14px }
.step {
    background: #fff; border: 1px solid var(--line-soft); border-radius: 18px;
    padding: 20px 22px; display: flex; gap: 18px; transition: border-color .2s;
    width: 100%;
}
.step:hover { border-color: var(--primary) }
.st-n {
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 15px; color: var(--primary);
    background: var(--lilac); width: 32px; height: 32px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.st-t { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 18px; margin-bottom: 5px }
.st-d { font-size: 14px; color: var(--muted); line-height: 1.55; text-wrap: pretty }
.steps-media { border-radius: 24px; overflow: hidden; height: 440px; position: relative }
.steps-media img { width: 100%; height: 100%; object-fit: cover }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
    .hero h1 { font-size: 54px }
    .sec-top { flex-direction: column; align-items: flex-start; gap: 24px }
    .sec-top h2 { font-size: 34px }
    .bento, .bn-pair { grid-template-columns: 1fr }
    .ts-item.is-on { grid-template-columns: 1fr; gap: 28px }
    .appband, .steps-layout { grid-template-columns: 1fr; gap: 30px }
    .app-shot { height: 260px }
    .steps-media { height: 300px }
}
@media (max-width: 760px) {
    .hm-sec { padding: 60px 20px 0 }
    .hero { padding-top: 40px }
    .hero h1 { font-size: 38px }
    .hero-sub { font-size: 16px }
    .hero-search { flex-wrap: wrap; border-radius: 24px; padding: 12px }
    .hero-search .hm-city { width: 100% }
    .hero-search .sep { display: none }
    .hero-search .btn { width: 100% }
    .hero-mosaic { grid-template-columns: 1fr; height: auto }
    .hm-tile { height: 200px }
    .testimonial { padding: 26px }
    .ts-body p { font-size: 20px }
    .appband { padding: 28px }
    .appband h2, .steps-title { font-size: 30px }
    .test-stats { gap: 18px; flex-direction: column; align-items: center }
}

/* Botón de reproducción sobre la imagen de «cómo funciona» */
.steps-media .play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 64px; height: 64px; border-radius: 999px;
    background: rgba(255, 255, 255, .92); color: var(--primary);
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    transition: background .2s, color .2s;
}
.steps-media .play:hover { background: var(--primary); color: #fff }

/* ---------- Botones de las tiendas de aplicaciones ---------- */
.app-btns .store {
    display: inline-flex; align-items: center; gap: 11px;
    padding: 10px 20px; border-radius: 14px; text-align: left;
}
.app-btns .store span { display: flex; flex-direction: column; line-height: 1.15 }
.app-btns .store small {
    font-size: 10.5px; font-weight: 400; opacity: .7;
    text-transform: uppercase; letter-spacing: .04em;
}
.app-btns .store svg { flex: 0 0 auto }

/* ============================================================
   Buscadores en tableta y móvil

   El diseño los resuelve como una pastilla única: el borde lo pone el
   contenedor y los campos van transparentes. Al envolverse en pantallas
   estrechas cada campo se quedaba sin caja y no parecía un campo. Por
   debajo de 900px se apilan y cada uno recupera su propia caja.
   ============================================================ */
@media (max-width: 900px) {
    .searchbar,
    .hero-search {
        flex-wrap: wrap; gap: 10px; border-radius: 20px; padding: 14px;
        box-shadow: var(--shadow-soft);
    }

    .searchbar > .pin,
    .searchbar .sep,
    .hero-search .sep { display: none }

    /* Cada campo, con su caja */
    .searchbar input[type=text],
    .hero-search input[type=text] {
        width: 100%; flex: 1 0 100%;
        background: #fff; border: 1px solid var(--line-input); border-radius: 14px;
        padding: 13px 15px; font-size: 15px;
    }
    .searchbar input[type=text]:focus,
    .hero-search input[type=text]:focus {
        border-color: var(--primary); box-shadow: 0 0 0 4px rgba(91, 75, 224, .12);
    }

    /* El selector de ciudad se ve como un campo más */
    .searchbar .hm-city,
    .hero-search .hm-city { width: 100%; flex: 1 0 100% }
    .searchbar .hm-city-btn,
    .hero-search .hm-city-btn {
        width: 100%; background: #fff; border: 1px solid var(--line-input);
        border-radius: 14px; padding: 13px 15px; font-size: 15px;
    }
    .searchbar .hm-city-btn:hover,
    .hero-search .hm-city-btn:hover { border-color: var(--primary-2) }

    .searchbar .btn,
    .hero-search .btn { width: 100%; justify-content: center; padding: 13px 20px }
}

/* ============================================================
   Menú de hamburguesa y panel lateral

   hm.css esconde la navegación por debajo de 760px y no deja alternativa:
   en móvil solo quedaban «Entrar» y «Registrarme». Aquí la navegación se
   retira antes (960px, cuando ya no cabe) y en su lugar aparece la
   hamburguesa, que abre un panel a lo alto desde la derecha.
   ============================================================ */

.burger {
    display: none; width: 42px; height: 42px; flex: 0 0 auto;
    border: 1px solid var(--line-mid); border-radius: 12px; background: #fff;
    cursor: pointer; padding: 0;
    flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.burger span {
    display: block; width: 17px; height: 2px; border-radius: 2px;
    background: var(--ink); transition: transform .2s;
}
.burger:hover { border-color: var(--primary) }
.burger:hover span { background: var(--primary) }

@media (max-width: 960px) {
    .site-nav { display: none }
    .burger { display: flex }
    /* En la barra solo se deja la acción principal; el resto va al panel. */
    .header-actions .link-login { display: none }
}
@media (max-width: 520px) {
    .header-actions .btn { display: none }
    .site-header .brand .name { font-size: 17px }
}

/* ---------- Panel ---------- */
.drawer { position: fixed; inset: 0; z-index: 900 }
.drawer[hidden] { display: none }
.drawer-back {
    position: absolute; inset: 0; background: rgba(20, 19, 48, .5);
    opacity: 0; transition: opacity .26s var(--ease-ds-out, ease);
}
.drawer.is-on .drawer-back { opacity: 1 }

.drawer-panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 88vw);
    background: var(--bg); display: flex; flex-direction: column;
    box-shadow: var(--shadow-deep);
    transform: translateX(100%);
    transition: transform .26s var(--ease-ds-out, ease);
}
.drawer.is-on .drawer-panel { transform: translateX(0) }

.drawer-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 18px 22px; border-bottom: 1px solid var(--line);
}
.drawer-head .brand img { height: 30px; width: auto }
.drawer-head .brand .name { font-size: 17px }
.drawer-x {
    background: none; border: 0; font-size: 28px; line-height: 1;
    color: var(--muted-2); cursor: pointer; padding: 0 4px;
}
.drawer-x:hover { color: var(--ink) }

.drawer-nav { flex: 1; overflow-y: auto; padding: 10px 12px }
.drawer-nav a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 14px; border-radius: 14px;
    font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 16px; color: var(--ink);
    transition: background .18s, color .18s;
}
.drawer-nav a svg { color: var(--line-mid); transition: transform .18s, color .18s }
.drawer-nav a:hover { background: #fff; color: var(--primary) }
.drawer-nav a:hover svg { color: var(--primary); transform: translateX(3px) }
.drawer-nav a.is-active { background: var(--lilac); color: var(--primary) }
.drawer-nav a.is-active svg { color: var(--primary) }

.drawer-foot {
    padding: 18px 22px 22px; border-top: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 10px;
}
.drawer-tel {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 6px; font-size: 13.5px; color: var(--muted-3);
}
.drawer-tel svg { color: var(--primary) }

@media (prefers-reduced-motion: reduce) {
    .drawer-back, .drawer-panel { transition: none }
}

/* ---------- Servicios de la portada: cuatro en fila ----------
   El listado baja a tres columnas a partir de 1480px porque allí conviven
   con la barra de filtros. En la portada no hay barra, así que las cuatro
   caben holgadas hasta bien entrada la tableta. */
.results-grid.grid-4 { grid-template-columns: repeat(4, 1fr) }
@media (max-width: 1080px) { .results-grid.grid-4 { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 620px)  { .results-grid.grid-4 { grid-template-columns: 1fr } }

/* ============================================================
   Filtros retráctiles en tableta y móvil

   Por debajo de 1080px la barra lateral pasa a ocupar todo el ancho encima
   de los resultados y empuja las tarjetas fuera de la pantalla. Ahí se
   pliega y aparece un botón junto al recuento, con el número de filtros
   puestos. El interruptor es un checkbox: funciona sin JavaScript.
   ============================================================ */

.filters-toggle { position: absolute; opacity: 0; pointer-events: none }

/* En escritorio no hay botón: la barra se ve siempre. */
.filters-btn { display: none }

@media (max-width: 1080px) {
    .filters-btn {
        display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
        background: #fff; border: 1px solid var(--line-mid); border-radius: 12px;
        padding: 9px 14px; font-size: 14px; color: var(--ink);
        transition: border-color .2s, background .2s;
        order: -1;
    }
    .filters-btn:hover { border-color: var(--primary); color: var(--primary) }
    .filters-btn svg { color: var(--primary) }
    .filters-btn .fb-n {
        background: var(--primary); color: #fff; border-radius: 999px;
        min-width: 19px; height: 19px; padding: 0 5px;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 11px; font-weight: 600;
    }

    /* La barra se pliega y solo baja cuando se pide. */
    .results-layout > .filters { display: none }
    .filters-toggle:checked ~ .filters { display: block }

    /* Desplegada, se lee como un panel, no como una columna suelta. */
    .results-layout > .filters {
        border-radius: 20px; box-shadow: var(--shadow-soft);
        margin-bottom: 4px;
    }

    /* Con el panel abierto el botón queda marcado. */
    .filters-toggle:checked ~ div .filters-btn {
        background: var(--lilac); border-color: var(--primary); color: var(--primary);
    }

    /* El botón de aplicar deja de perseguir al usuario: el panel ya es corto. */
    .filters-apply { position: static }

    .results-toolbar { gap: 12px }
    .results-count { flex: 1 1 auto }
}

@media (max-width: 620px) {
    .results-toolbar { align-items: stretch }
    .filters-btn { justify-content: center }
    /* La etiqueta pasa arriba y el desplegable ocupa todo el ancho, con las
       mismas medidas que los demas campos de la web. */
    .sort { flex: 1 1 100%; width: 100%; flex-direction: column; align-items: stretch; gap: 6px }
    .sort .hm-select { min-width: 0 }
    .sort .control, .sort .hm-select { flex: 1 }
    .sort .hm-select-trigger { padding: 14px 16px; font-size: 15px; border-radius: 14px }
    .sort .hm-select-option { padding: 13px 14px; font-size: 15px }
}