/* TWL Local SEO — Styles < 5KB */

/* Container */
.twl-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* Buttons */
.twl-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.5rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    transition: opacity .2s, transform .15s;
    cursor: pointer;
    border: 2px solid transparent;
}
.twl-btn:hover { opacity: .88; transform: translateY(-1px); }
.twl-btn--whatsapp { background: #25d366; color: #fff; }
.twl-btn--whatsapp::before { content: ''; display: inline-block; width: 1.1em; height: 1.1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z'/%3E%3C/svg%3E") no-repeat center/contain; }
.twl-btn--outline { background: transparent; color: #1a1a1a; border-color: #1a1a1a; }
.twl-btn--outline:hover { background: #1a1a1a; color: #fff; }
.twl-btn--lg { padding: 1rem 2rem; font-size: 1.05rem; }
.twl-btn--sm { padding: .5rem 1rem; font-size: .85rem; }

/* Breadcrumb */
.twl-breadcrumb { padding: 1rem 1.25rem; background: #f8f8f8; border-bottom: 1px solid #eee; font-size: .85rem; }
.twl-breadcrumb ol { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: 0; padding: 0; max-width: 1200px; margin: 0 auto; }
.twl-breadcrumb li + li::before { content: '›'; margin-right: .3rem; color: #888; }
.twl-breadcrumb a { color: #b8860b; text-decoration: none; }
.twl-breadcrumb a:hover { text-decoration: underline; }

/* Hero */
.twl-local-hero { background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 60%, #2a1a00 100%); color: #fff; padding: 4rem 1.25rem 3rem; text-align: center; }
.twl-local-hero__inner { max-width: 760px; margin: 0 auto; }
.twl-local-hero__icon { font-size: 2.5rem; display: block; margin-bottom: .75rem; }
.twl-local-hero__title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; margin: 0 0 1rem; line-height: 1.2; letter-spacing: -.02em; }
.twl-local-hero__subtitle { font-size: 1.05rem; color: #ccc; margin: 0 0 1.75rem; line-height: 1.6; }
.twl-local-hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-bottom: 1.5rem; }
.twl-local-hero .twl-btn--outline { color: #fff; border-color: rgba(255,255,255,.5); }
.twl-local-hero .twl-btn--outline:hover { background: rgba(255,255,255,.1); }
.twl-local-hero__trust { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: center; font-size: .82rem; color: #aaa; }

/* Sections */
.twl-local-why, .twl-local-service-detail, .twl-local-location, .twl-local-faq, .twl-local-related, .twl-city-services, .twl-city-nearby, .twl-areas-coverage, .twl-areas-zone, .twl-areas-services { padding: 3rem 1.25rem; }
.twl-local-why { background: #fafafa; }
.twl-local-service-detail { background: #fff; }
.twl-local-location { background: #f5f5f5; }
.twl-local-faq { background: #fff; }
.twl-local-related { background: #f8f8f8; }
.twl-areas-zone--local { background: #f0fff4; }
.twl-areas-zone--medium { background: #eff8ff; }
.twl-areas-zone--far { background: #fafafa; }

/* Section headings */
.twl-local-why h2, .twl-local-service-detail h2, .twl-local-location h2, .twl-local-faq h2, .twl-local-related h3, .twl-city-services h2, .twl-city-nearby h2, .twl-areas-coverage h2, .twl-areas-zone h2, .twl-areas-services h2, .twl-areas-hero h1 { margin-top: 0; color: #1a1a1a; }

/* Why grid */
.twl-local-why__intro { font-size: 1.05rem; color: #444; margin-bottom: 2rem; max-width: 700px; }
.twl-local-why__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.twl-local-why__card { background: #fff; border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 12px rgba(0,0,0,.07); }
.twl-local-why__card-icon { font-size: 1.8rem; display: block; margin-bottom: .6rem; }
.twl-local-why__card h3 { font-size: 1rem; margin: 0 0 .5rem; color: #1a1a1a; }
.twl-local-why__card p { font-size: .9rem; color: #555; margin: 0; line-height: 1.5; }

/* Process steps */
.twl-local-process { margin-top: 1.5rem; }
.twl-local-process h3 { font-size: 1.1rem; margin: 0 0 1rem; }
.twl-local-process__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.twl-local-process__step { display: flex; align-items: center; gap: .75rem; background: #f8f8f8; border-radius: 6px; padding: .75rem 1rem; }
.twl-local-process__num { background: #b8860b; color: #fff; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; flex-shrink: 0; }
.twl-local-service-detail__desc { font-size: 1.05rem; color: #444; line-height: 1.7; max-width: 760px; }

/* Location grid */
.twl-local-location__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1.5rem; }
.twl-local-location__nap h3 { margin-top: 0; }
.twl-local-location__nap address { font-style: normal; line-height: 1.8; margin-bottom: 1rem; }
.twl-local-location__nap a { color: #b8860b; }
@media (max-width: 640px) { .twl-local-location__grid { grid-template-columns: 1fr; } }

/* FAQ */
.twl-local-faq__list { display: flex; flex-direction: column; gap: 0; max-width: 800px; }
.twl-local-faq__item { border-bottom: 1px solid #eee; padding: 1.25rem 0; }
.twl-local-faq__item:last-child { border-bottom: none; }
.twl-local-faq__question { font-size: 1rem; font-weight: 700; color: #1a1a1a; margin: 0 0 .5rem; }
.twl-local-faq__answer p { margin: 0; color: #555; font-size: .95rem; line-height: 1.6; }

/* Related */
.twl-local-related__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.twl-local-related__col h3 { font-size: 1.05rem; margin: 0 0 .75rem; color: #1a1a1a; border-bottom: 2px solid #b8860b; padding-bottom: .5rem; }
.twl-local-related__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.twl-local-related__col a { color: #333; text-decoration: none; font-size: .9rem; }
.twl-local-related__col a:hover { color: #b8860b; text-decoration: underline; }
@media (max-width: 640px) { .twl-local-related__grid { grid-template-columns: 1fr; } }

/* CTA */
.twl-local-cta { background: linear-gradient(135deg, #1a1a1a, #2a1a00); color: #fff; padding: 3.5rem 1.25rem; text-align: center; }
.twl-local-cta h2 { color: #fff; margin: 0 0 .75rem; font-size: 1.7rem; }
.twl-local-cta p { color: #ccc; margin: 0 0 1.75rem; }
.twl-local-cta__btns { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.twl-local-cta .twl-btn--outline { color: #fff; border-color: rgba(255,255,255,.5); }
.twl-local-cta .twl-btn--outline:hover { background: rgba(255,255,255,.1); }

/* Service Areas Hub */
.twl-areas-hero { background: linear-gradient(135deg, #0d0d0d, #1a1a1a); color: #fff; padding: 3.5rem 1.25rem; }
.twl-areas-hero h1 { margin: 0 0 .75rem; font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
.twl-areas-hero__sub { color: #bbb; font-size: 1.05rem; margin: 0; max-width: 600px; }

.twl-areas-coverage__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.twl-areas-coverage__text p { color: #444; line-height: 1.7; margin: 0 0 1rem; }
.twl-areas-coverage__stats { display: flex; gap: 2rem; margin-top: 1.5rem; }
.twl-areas-coverage__stat { text-align: center; }
.twl-areas-coverage__stat strong { display: block; font-size: 1.8rem; font-weight: 900; color: #b8860b; }
.twl-areas-coverage__stat span { font-size: .8rem; color: #666; text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 640px) { .twl-areas-coverage__grid { grid-template-columns: 1fr; } }

.twl-areas-zone h2 { margin: 0 0 1.5rem; font-size: 1.1rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.twl-areas-zone__badge { font-size: .7rem; font-weight: 700; padding: .25rem .7rem; border-radius: 12px; text-transform: uppercase; letter-spacing: .06em; }
.twl-areas-zone__badge--green { background: #d1fae5; color: #065f46; }
.twl-areas-zone__badge--blue { background: #dbeafe; color: #1e40af; }
.twl-areas-zone__badge--gray { background: #e5e7eb; color: #374151; }

.twl-areas-cities { display: flex; flex-wrap: wrap; gap: .75rem; }
.twl-areas-city-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: .9rem 1.1rem; text-decoration: none; color: #1a1a1a; min-width: 130px; transition: border-color .2s, box-shadow .2s; }
.twl-areas-city-card:hover { border-color: #b8860b; box-shadow: 0 2px 12px rgba(184,134,11,.15); }
.twl-areas-city-card__name { font-weight: 700; font-size: .95rem; }
.twl-areas-city-card__comarca { font-size: .75rem; color: #666; margin-top: .2rem; }
.twl-areas-city-card__dist { font-size: .75rem; color: #b8860b; font-weight: 600; margin-top: .4rem; }

.twl-areas-services__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.twl-areas-services__card { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 1.25rem; }
.twl-areas-services__icon { font-size: 1.6rem; display: block; margin-bottom: .5rem; }
.twl-areas-services__card h3 { font-size: .95rem; margin: 0 0 .4rem; color: #1a1a1a; }
.twl-areas-services__card p { font-size: .85rem; color: #555; margin: 0 0 .75rem; line-height: 1.5; }
.twl-areas-services__card a { font-size: .82rem; color: #b8860b; text-decoration: none; font-weight: 600; }
.twl-areas-services__card a:hover { text-decoration: underline; }

/* City hub */
.twl-city-services__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.twl-city-service-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 1.4rem; text-decoration: none; color: #1a1a1a; transition: border-color .2s, box-shadow .2s, transform .15s; }
.twl-city-service-card:hover { border-color: #b8860b; box-shadow: 0 4px 20px rgba(184,134,11,.12); transform: translateY(-2px); }
.twl-city-service-card__icon { font-size: 1.8rem; display: block; margin-bottom: .6rem; }
.twl-city-service-card__title { font-size: 1rem; font-weight: 700; margin: 0 0 .4rem; color: #1a1a1a; }
.twl-city-service-card__desc { font-size: .85rem; color: #555; margin: 0 0 .75rem; line-height: 1.5; flex: 1; }
.twl-city-service-card__link { font-size: .82rem; color: #b8860b; font-weight: 600; }