/* ============================================================
   HDP – ABOUT PAGE  |  Hato Damas TV  v1.2
   ============================================================ */

:root {
    --hdp-orange:    #F36F21;
    --hdp-orange-d:  #C9570F;
    --hdp-dark:      #111111;
    --hdp-dark2:     #1C1C1C;
    --hdp-white:     #FFFFFF;
    --hdp-light-bg:  #F7F5F2;
    --hdp-radius:    14px;
    --hdp-transition: 0.35s cubic-bezier(.4,0,.2,1);
}

.hdp-accent { color: var(--hdp-orange) !important; }

/* ============================================================
   FULL-WIDTH BREAKOUT — rompe el contenedor del tema
   ============================================================ */
.hdp-hero,
.hdp-mv-section,
.hdp-values-section {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box !important;
}

/* Elimina espacio blanco arriba del hero */
.hdp-hero {
    margin-top: -3rem !important;
}
.entry-content > p:empty,
.entry-content > br,
.page-content > p:empty { display: none !important; }

/* ============================================================
   HERO
   ============================================================ */
.hdp-hero {
    min-height: 94vh;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #111 !important;
}
.hdp-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('https://hatodamastv.com.do/wp-content/uploads/2026/06/Hato-Damas.png');
    background-size: cover;
    background-position: center;
    filter: blur(6px) brightness(0.32) saturate(0.75);
    transform: scale(1.08);
    z-index: 0;
}
.hdp-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg,rgba(10,10,10,.60) 0%,rgba(10,10,10,.75) 60%,rgba(10,10,10,.93) 100%);
    z-index: 1;
}
#hdp-particles { position: absolute; inset: 0; z-index: 2; }

.hdp-hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 2rem 1.5rem;
    max-width: 820px;
}
.hdp-hero-badge {
    display: inline-block;
    background: rgba(243,111,33,0.18);
    border: 1px solid rgba(243,111,33,0.50);
    color: #FFB27A !important;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: .42em 1.1em;
    border-radius: 999px;
    margin-bottom: 1.6rem;
    backdrop-filter: blur(6px);
}
.hdp-hero-title {
    font-family: 'Georgia','Times New Roman',serif !important;
    font-size: clamp(2.6rem,7vw,5.5rem) !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    color: #FFFFFF !important;
    margin: 0 0 1.2rem !important;
    letter-spacing: -.02em !important;
    text-shadow: 0 2px 20px rgba(0,0,0,.6) !important;
}
.hdp-hero-title .hdp-hero-line1 {
    display: block !important;
    color: #FFFFFF !important;
    font-style: italic;
    font-size: .7em;
    font-weight: 400 !important;
    opacity: .88;
    margin-bottom: .1em;
}
.hdp-hero-title .hdp-accent {
    display: block !important;
    color: #F36F21 !important;
    font-style: normal;
    font-weight: 900 !important;
    text-shadow: 0 0 40px rgba(243,111,33,.45) !important;
}
.hdp-hero-sub {
    font-size: clamp(1rem,2.2vw,1.18rem);
    color: rgba(255,255,255,.78) !important;
    max-width: 560px;
    margin: 0 auto 2.4rem;
    line-height: 1.65;
    text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.hdp-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #F36F21 !important;
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: .95rem;
    padding: .85em 2em;
    border-radius: 999px;
    text-decoration: none !important;
    transition: background var(--hdp-transition),transform var(--hdp-transition);
    letter-spacing: .03em;
    box-shadow: 0 4px 20px rgba(243,111,33,.4);
}
.hdp-hero-cta svg { width: 18px; height: 18px; }
.hdp-hero-cta:hover { background: #C9570F !important; transform: translateY(2px); }

.hdp-hero-scroll-hint { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 3; }
.hdp-scroll-line {
    width: 1px; height: 60px;
    background: linear-gradient(to bottom,rgba(255,255,255,.5),transparent);
    margin: 0 auto;
    animation: hdp-scroll-line 2s ease-in-out infinite;
}
@keyframes hdp-scroll-line {
    0%,100%{ opacity:.3; transform:scaleY(.6) translateY(-10px); }
    50%    { opacity:1;   transform:scaleY(1)  translateY(0); }
}

/* ============================================================
   SECTIONS GENERALES
   ============================================================ */
.hdp-section { padding: 6rem 1.5rem; }
.hdp-container { max-width: 1180px; margin: 0 auto; }
.hdp-section-label {
    font-size: .7rem; font-weight: 800;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--hdp-orange) !important; margin-bottom: .8rem;
}
.hdp-section-title {
    font-family: 'Georgia','Times New Roman',serif !important;
    font-size: clamp(1.9rem,4vw,3rem) !important;
    font-weight: 900 !important;
    color: var(--hdp-dark) !important;
    line-height: 1.15; margin: 0 0 1.8rem;
}
.hdp-centered { text-align: center; }

/* ── ABOUT GRID ── */
.hdp-about-section { background: #fff; }
.hdp-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
@media(max-width:768px){ .hdp-about-grid{ grid-template-columns:1fr; gap:2.5rem; } }
.hdp-about-text p { font-size: 1rem; line-height: 1.78; color: #3a3a3a; margin: 0 0 1.2rem; }
.hdp-tagline {
    margin-top: 1.8rem; padding: 1.2rem 1.5rem;
    border-left: 4px solid var(--hdp-orange);
    background: rgba(243,111,33,.06);
    border-radius: 0 var(--hdp-radius) var(--hdp-radius) 0;
    font-size: 1.05rem; color: var(--hdp-dark); line-height: 1.6;
}
.hdp-about-image-frame { position: relative; border-radius: var(--hdp-radius); overflow: visible; }
.hdp-about-image-frame img {
    width: 100%; border-radius: var(--hdp-radius);
    object-fit: cover; display: block;
    box-shadow: 0 28px 56px rgba(0,0,0,.18);
}
.hdp-image-badge {
    position: absolute; bottom: -1.2rem; right: -1.2rem;
    background: var(--hdp-orange); color: #fff;
    border-radius: var(--hdp-radius); padding: 1rem 1.4rem;
    text-align: center; box-shadow: 0 8px 24px rgba(243,111,33,.4);
}
.hdp-image-badge-number { display:block; font-size:2rem; font-weight:900; line-height:1; font-family:'Georgia',serif; }
.hdp-image-badge-text { display:block; font-size:.7rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; opacity:.85; }

/* ── MISIÓN & VISIÓN ── */
.hdp-mv-section { background: #111 !important; padding: 5rem 1.5rem; }
.hdp-mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media(max-width:640px){ .hdp-mv-grid{ grid-template-columns:1fr; } }

.hdp-mv-card {
    background: #1C1C1C !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: var(--hdp-radius);
    padding: 2.5rem;
    transition: transform var(--hdp-transition), box-shadow var(--hdp-transition);
}
.hdp-mv-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,.4); }
.hdp-mv-mision { border-top: 3px solid #F36F21 !important; }
.hdp-mv-vision { border-top: 3px solid rgba(243,111,33,.5) !important; }

.hdp-mv-icon { color: #F36F21 !important; margin-bottom: 1.2rem; }
.hdp-mv-icon svg { width: 42px; height: 42px; }

/* ★ TÍTULOS MISIÓN/VISIÓN — blanco con !important para ganar al tema */
.hdp-mv-card h3,
.hdp-mv-card h3 *,
.hdp-mv-section .hdp-mv-card h3 {
    font-family: 'Georgia',serif !important;
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin: 0 0 1rem !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #FFFFFF !important;
}
.hdp-mv-card p {
    font-size: .98rem !important;
    line-height: 1.75 !important;
    color: rgba(255,255,255,.72) !important;
    margin: 0 !important;
}

/* ── VALORES ── */
.hdp-values-section { background: var(--hdp-light-bg) !important; }
.hdp-values-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 1.5rem; margin-top: 3rem; }
.hdp-value-card {
    background: #fff; border-radius: var(--hdp-radius);
    padding: 2rem 1.5rem; text-align: center;
    border: 1px solid rgba(0,0,0,.07);
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
    transition: transform var(--hdp-transition), box-shadow var(--hdp-transition);
    animation: hdp-fadein .6s ease both;
    animation-delay: var(--delay,0s);
}
.hdp-value-card:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(243,111,33,.15); }
.hdp-value-icon { color: #F36F21 !important; margin-bottom: 1rem; }
.hdp-value-icon svg { width: 40px; height: 40px; }
.hdp-value-card h4 {
    font-size: .95rem !important; font-weight: 800 !important;
    color: #111 !important; margin: 0 0 .6rem !important;
    text-transform: uppercase; letter-spacing: .04em;
}
.hdp-value-card p { font-size: .88rem; color: #555 !important; line-height: 1.65; margin: 0; }

@keyframes hdp-fadein {
    from { opacity:0; transform:translateY(20px); }
    to   { opacity:1; transform:translateY(0); }
}