/* =========================================================================
   zone.css — Estilos específicos de plantilla CPT Zonas
   Extraído de zona.html.
   ========================================================================= */

/* HERO Zona */
.zone-hero {
    position: relative;
    color: #fff;
    overflow: hidden;
    padding: var(--space-4) 0 var(--space-5);
    background:
        radial-gradient(900px 500px at -10% -10%, rgba(124,255,183,0.18), transparent 60%),
        radial-gradient(700px 400px at 110% 110%, rgba(29,158,117,0.4), transparent 60%),
        linear-gradient(135deg, #0c2a23 0%, #0F6E56 60%, #1D9E75 100%);
}
.zone-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 22px);
    pointer-events: none;
}
.zone-hero-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
    position: relative;
    z-index: 1;
}
@media (min-width: 980px) { .zone-hero-grid { grid-template-columns: 1.1fr 1fr; gap: var(--space-5); align-items: center; } }
.zone-hero h1 { color: #fff; text-wrap: balance; }
@media (min-width: 768px) { .zone-hero h1 { font-size: 46px; } }
.zone-hero-sub { font-size: 18px; color: rgba(255,255,255,0.92); line-height: 1.5; max-width: 46ch; margin-top: var(--space-2); }
.zone-pin {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    padding: 8px 14px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
    align-self: flex-start;
    color: #fff;
}
.zone-pin svg { width: 14px; height: 14px; color: #7CFFB7; }
.zone-hero-ctas { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-3); }
@media (min-width: 560px) {
    .zone-hero-ctas { flex-direction: row; flex-wrap: wrap; }
    .zone-hero-ctas .btn { flex: 1 1 0; min-width: auto; }
}
.zone-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255,255,255,0.18);
}
.zone-stats > div strong { font-family: var(--font-heading); font-size: 22px; color: #fff; display: block; line-height: 1.1; letter-spacing: -0.01em; }
.zone-stats > div small { display: block; color: rgba(255,255,255,0.78); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }

.zone-media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/3;
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    background:
        linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55)),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 18px),
        linear-gradient(135deg, #1a2925, #0F6E56);
    margin: 0;
}
.zone-media-tag {
    position: absolute; top: 14px; left: 14px;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(8px);
    color: #fff; padding: 6px 10px;
    border-radius: var(--radius-full);
    font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase;
}
.zone-media-tag .pin { width: 8px; height: 8px; background: #7CFFB7; border-radius: 50%; }
.zone-media-cap { position: absolute; bottom: 14px; left: 14px; right: 14px; color: #fff; }
.zone-media-cap strong { font-family: var(--font-heading); font-size: 15px; display: block; }
.zone-media-cap span { font-size: 12px; color: rgba(255,255,255,0.75); }
.zone-media-play {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 72px; height: 72px;
    border-radius: 50%; background: rgba(255,255,255,0.96);
    display: grid; place-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.zone-media-play svg { width: 26px; height: 26px; color: var(--color-primary); margin-left: 3px; }

/* Intro block - editorial */
.intro-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 900px) { .intro-grid { grid-template-columns: 1.5fr 1fr; gap: var(--space-5); } }
.intro-text { font-size: 17px; line-height: 1.7; color: var(--color-text); }
.intro-text strong { color: var(--color-primary); }
.intro-text p { margin-bottom: 14px; }
.intro-text p:first-of-type::first-letter {
    font-family: var(--font-heading);
    font-size: 64px;
    line-height: 0.8;
    float: left;
    margin: 6px 8px 0 0;
    color: var(--color-primary);
    font-weight: 800;
}
.intro-quote {
    background: var(--color-primary-soft);
    border-left: 4px solid var(--color-primary);
    padding: var(--space-2) var(--space-3);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.55;
    margin-top: 8px;
}
.intro-quote cite {
    display: block;
    font-style: normal;
    font-size: 13px;
    color: var(--color-text-soft);
    margin-top: 8px;
    font-weight: 600;
}
.intro-card {
    background: #fff;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.intro-card h3 { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.intro-card h3 svg { width: 18px; height: 18px; color: var(--color-primary); }
.intro-card-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.intro-card-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed var(--color-border);
    font-size: 14px;
}
.intro-card-list li:last-child { border: 0; }
.intro-card-list li strong { font-family: var(--font-heading); color: var(--color-primary); font-size: 14px; }

/* Servicios en zona */
.zsv-wrap { background: #fff; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.zsv-grid {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 1fr 1fr;
}
@media (min-width: 768px) { .zsv-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } }
.zsv-card {
    background: #fff;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all .15s ease;
    position: relative;
    overflow: hidden;
}
.zsv-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-primary-light); }
.zsv-img {
    aspect-ratio: 5/3;
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
    background:
        linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5)),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 16px),
        linear-gradient(135deg, #1D9E75, #0F6E56);
}
.zsv-card h3 { font-size: 15px; line-height: 1.25; }
.zsv-card p { font-size: 13px; color: var(--color-text-soft); line-height: 1.45; }
.zsv-card .price { font-family: var(--font-heading); font-weight: 700; color: var(--color-primary); font-size: 14px; margin-top: auto; }
.zsv-link {
    font-weight: 600; font-size: 13px;
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--color-primary);
}
.zsv-link::after { content: "→"; }

/* Map zona */
.zmap-wrap { background: linear-gradient(180deg, var(--color-primary-soft), #fff 70%); }
.zmap-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-md);
}
.zmap-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .zmap-grid { grid-template-columns: 1.3fr 1fr; } }
.zmap-col { position: relative; display: flex; flex-direction: column; }
.zmap {
    position: relative;
    background:
        radial-gradient(circle at 50% 55%, rgba(15,110,86,0.1) 0%, transparent 60%),
        linear-gradient(135deg, #0c2a23, #143b32 60%, #1a4d3f);
    overflow: hidden;
    aspect-ratio: 4/3;
    min-height: 340px;
}
@media (min-width: 900px) { .zmap { aspect-ratio: auto; min-height: 520px; } }
.zmap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.zmap-overlay {
    position: absolute;
    top: 14px; left: 14px; right: 14px;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    pointer-events: none;
}
.zmap-overlay > * { pointer-events: auto; }
.zmap-status {
    background: rgba(12,42,35,0.92);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(124,255,183,0.3);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.zmap-status .dot {
    width: 8px; height: 8px;
    background: #7CFFB7;
    border-radius: 50%;
    animation: dotPulse 1.6s ease-in-out infinite;
}
.zmap-status strong { color: #7CFFB7; font-family: var(--font-heading); }
.zmap-info {
    background: #fff;
    border-top: 1px solid var(--color-border);
    padding: 14px;
}
@media (min-width: 900px) {
    .zmap-info {
        position: absolute;
        bottom: 14px; left: 14px; right: 14px;
        z-index: 4;
        background: rgba(255,255,255,0.98);
        backdrop-filter: blur(10px);
        border-radius: var(--radius-md);
        padding: 14px;
        box-shadow: 0 12px 32px rgba(0,0,0,0.3);
        border: 1px solid rgba(124,255,183,0.4);
    }
}
.zmap-info-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; }
.zmap-info-name { font-family: var(--font-heading); font-weight: 800; font-size: 16px; color: var(--color-text); display: flex; align-items: center; gap: 6px; }
.zmap-info-name svg { width: 14px; height: 14px; color: var(--color-primary); }
.zmap-info-eta { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 700; font-size: 11px; padding: 4px 10px; border-radius: var(--radius-full); }
.zmap-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.zmap-info-cell { background: #FAFAF8; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px 6px; text-align: center; }
.zmap-info-cell strong { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 14px; color: var(--color-primary); }
.zmap-info-cell small { display: block; font-size: 9px; color: var(--color-text-soft); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; font-weight: 600; }
.zmap-info-cta { display: flex; gap: 6px; }
.zmap-info-cta .btn { flex: 1; min-height: 42px; font-size: 13px; min-width: 0; width: auto; padding: 0 12px; gap: 6px; }
.zmap-info-cta .btn svg { width: 16px; height: 16px; }
.zmap-side { display: none; }
@media (min-width: 900px) {
    .zmap-side { display: flex; flex-direction: column; gap: 12px; padding: var(--space-3); background: #fff; border-left: 1px solid var(--color-border); }
    .zmap-side h3 { font-size: 15px; margin: 0; display: flex; align-items: center; gap: 6px; }
    .zmap-side p { font-size: 13px; color: var(--color-text-soft); line-height: 1.45; margin: 0; }
    .zmap-side-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; max-height: 380px; }
    .zmap-side-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: #FAFAF8; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--color-text); }
    .zmap-side-item:hover { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); }
}

/* HOW (3 pasos) */
.zhow-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
    counter-reset: zstep;
}
@media (min-width: 900px) { .zhow-grid { grid-template-columns: repeat(3, 1fr); } }
.zhow {
    background: #fff;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-3) var(--space-3) 70px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.zhow::before {
    counter-increment: zstep;
    content: counter(zstep);
    position: absolute;
    top: var(--space-3); left: var(--space-3);
    width: 42px; height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-primary), #0a5644);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 18px;
    display: grid; place-items: center;
    box-shadow: 0 6px 16px rgba(15,110,86,0.35);
}
.zhow h3 { font-size: 16px; }
.zhow p { font-size: 14px; color: var(--color-text-soft); line-height: 1.5; }
.zhow .time { font-size: 12px; color: var(--color-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 6px; }

/* CTA zona */
.zcta-wrap {
    background: linear-gradient(135deg, #0F6E56, #1D9E75);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-align: center;
    position: relative;
    overflow: hidden;
}
@media (min-width: 768px) { .zcta-wrap { padding: var(--space-5); } }
.zcta-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 22px);
    pointer-events: none;
}
.zcta-wrap h3 {
    font-family: var(--font-heading);
    color: #fff;
    font-size: 28px;
    margin-bottom: 8px;
    position: relative;
    text-wrap: balance;
}
@media (min-width: 768px) { .zcta-wrap h3 { font-size: 36px; } }
.zcta-wrap p {
    color: rgba(255,255,255,0.88);
    margin-bottom: var(--space-3);
    position: relative;
    font-size: 17px;
}
.zcta-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    position: relative;
}
@media (min-width: 560px) { .zcta-buttons { flex-direction: row; justify-content: center; } }