/* =====================================================================
   AREA Panamá — public.css
   Secciones del sitio público: home, quiénes somos, directorio, ficha de
   miembro, actualidad, beneficios, contacto, afiliación.
   ===================================================================== */

/* ---- HERO home ---- */
.hero{position:relative;overflow:hidden;padding:70px 0 80px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.hero h1{margin:14px 0 22px}
.hero h1 .red{color:var(--rojo)}
.hero .lead{font-size:19px;max-width:440px}
.hero-cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.collage{display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:200px 130px 120px;gap:14px;position:relative;z-index:2}
.collage .photo{height:100%}
.collage .photo img{object-position:50% 20%}
.collage .p1{grid-row:span 2}
.collage .p1 img{object-position:50% 28%}
.collage .p4{grid-column:span 2}
.collage .p4 img{object-position:50% 30%}
.hero-deco{position:absolute;inset:-40px -30px;z-index:1;pointer-events:none;opacity:.85}
.hero-deco path{fill:none;stroke:var(--rojo);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---- editorial split ---- */
.editorial{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.editorial .photo{height:360px}

/* ---- pillars ---- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr)}
.pillar{text-align:center;padding:14px;position:relative}
.pillar+.pillar::before{content:"";position:absolute;left:0;top:12px;height:70px;width:1px;background:var(--line)}
.pillar .pic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;border:1.8px solid currentColor}
.pillar .pic .area-ico{width:28px;height:28px}
.pillar.c-red{color:var(--rojo)}.pillar.c-blue{color:var(--azul)}.pillar.c-cyan{color:var(--celeste)}.pillar.c-amber{color:#d99e00}
.pillar h3{font-size:18px;margin-bottom:7px;color:var(--ink)}
.pillar p{font-size:13.5px;color:var(--muted);max-width:210px;margin:0 auto}

/* ---- benefits split (home) ---- */
.bsplit{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.bsplit .red-line{width:46px;height:3px;background:var(--rojo);border-radius:3px;margin:22px 0}
.bcards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bcard{display:flex;gap:14px;padding:20px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:.2s}
.bcard:hover{border-color:#dfe3f1;box-shadow:var(--shadow)}
.bcard .bi{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff}
.bcard .bi .area-ico{width:20px;height:20px}
.bcard h4{font-size:15px;margin-bottom:4px}
.bcard p{font-size:12.8px;color:var(--muted);line-height:1.5}

/* ---- logos carousel (miembros) ---- */
.logos-row{display:flex;align-items:center;gap:24px}
.logos-row .arrow{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;flex:none;color:var(--muted);transition:.15s}
.logos-row .arrow:hover{border-color:var(--azul);color:var(--azul)}
.logos-track{flex:1;display:flex;gap:36px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;align-items:center}
.logos-track::-webkit-scrollbar{display:none}
.logo-item{scroll-snap-align:start;font-weight:700;color:#aeb3c7;font-size:19px;white-space:nowrap;font-family:Georgia,serif;text-align:center;flex:none}
.logo-item img{max-height:44px;width:auto;filter:grayscale(1);opacity:.7;transition:.2s}
.logo-item:hover img{filter:none;opacity:1}

/* ---- news cards ---- */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.news-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.2s}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.news-card .thumb{height:175px}
.news-card .body{padding:22px}
.news-card .nb{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:6px;color:#fff;background:var(--azul)}
.news-card .nb.rojo{background:var(--rojo)}.news-card .nb.celeste{background:var(--celeste)}.news-card .nb.amarillo{background:#d99e00}
.news-card .date{font-size:12px;color:var(--muted);margin-left:10px}
.news-card h3{font-size:17px;line-height:1.32;margin:13px 0}
.news-card:hover h3{color:var(--azul)}
.readmore{font-size:13.5px;font-weight:600;color:var(--azul);display:inline-flex;gap:6px;align-items:center}

/* ---- CTA band ---- */
.cta-final{background:linear-gradient(110deg,var(--azul),#1a2868);border-radius:var(--radius-lg);padding:56px 48px;display:flex;align-items:center;justify-content:space-between;gap:30px;color:#fff;position:relative;overflow:hidden;flex-wrap:wrap}
.cta-final h2{font-size:clamp(24px,2.8vw,36px);max-width:560px;position:relative;z-index:2}

/* ---- interior page hero (split) ---- */
.split-hero{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:440px}
.split-hero .txt{padding:70px 0;display:flex;flex-direction:column;justify-content:center}
.split-hero .ph{position:relative;border-radius:0 0 0 var(--radius-lg);overflow:hidden}
.split-hero h1{font-size:clamp(32px,4vw,52px);font-weight:800}
.split-hero h1 .dot{color:var(--rojo)}

/* ---- about: propósito / personalidad-valores / historia ---- */
.prop-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.prop{text-align:center;padding:0 16px;position:relative}
.prop+.prop::before{content:"";position:absolute;left:0;top:6px;height:62px;width:1px;background:var(--line)}
.prop .pic{width:60px;height:60px;display:grid;place-items:center;margin:0 auto 14px}
.prop .pic .area-ico{width:32px;height:32px}
.prop h4{font-size:17px;color:var(--azul);margin-bottom:7px}
.prop p{font-size:13px;color:var(--muted);max-width:200px;margin:0 auto}
.pv-card{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-lg);padding:44px;display:grid;grid-template-columns:1fr 1fr;gap:44px}
.pv-col h4.t{color:var(--rojo);font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:24px}
.pv-items{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pv-item h5{font-size:15px;margin-bottom:4px}
.pv-item p{font-size:12.5px;color:var(--muted);line-height:1.5}
.history{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:14px;padding-top:30px}
.history::before{content:"";position:absolute;left:5%;right:5%;top:36px;height:2px;background:var(--line)}
.hist{text-align:center;position:relative}
.hist .d{width:14px;height:14px;border-radius:50%;background:var(--rojo);margin:0 auto 22px;position:relative;z-index:2;border:3px solid #fff;box-shadow:0 0 0 2px var(--rojo)}
.hist .yr{font-size:24px;font-weight:800;color:var(--azul)}
.hist p{font-size:13px;color:var(--muted);margin-top:6px;padding:0 6px}

/* ---- directory single (perfil de empresa) ---- */
.crumb{font-size:13.5px;color:var(--muted);padding:18px 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.prof-banner{height:230px;position:relative;border-radius:var(--radius-lg);overflow:hidden}
.prof-head{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);margin:-90px 24px 0;padding:30px 36px 30px 200px;position:relative}
.prof-logo{position:absolute;left:30px;top:-50px;width:150px;height:150px;border-radius:50%;background:linear-gradient(135deg,#d4eef6,#eef9fc);border:6px solid #fff;box-shadow:var(--shadow-lg);display:grid;place-items:center;color:var(--azul);overflow:hidden}
.prof-logo img{width:100%;height:100%;object-fit:cover}
.prof-head h1{font-size:34px;display:inline-block;vertical-align:middle;margin-right:12px}
.prof-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:22px}
.area-fact{display:flex;gap:11px;align-items:center}
.area-fact__ico{width:19px;height:19px;flex:none;color:var(--azul)}
.area-fact__body b{font-size:13.5px;display:block}
.area-fact__body span{font-size:12px;color:var(--muted)}
.prof-body{display:grid;grid-template-columns:300px 1fr;gap:30px;margin-top:30px}
.side-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-bottom:20px}
.side-card h4{font-size:14px;display:flex;align-items:center;gap:9px;margin-bottom:16px}
.side-card p{font-size:13.5px;color:var(--muted);line-height:1.7}
.contact-line{display:flex;gap:10px;align-items:center;font-size:13.5px;color:var(--muted);margin-bottom:11px}
.contact-line .area-ico{width:16px;height:16px;flex:none;color:var(--azul)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery .photo{height:140px}
.ideal{background:var(--soft2);border-radius:var(--radius);padding:24px;display:flex;gap:16px;align-items:center;margin-top:24px}
.ideal .ii{width:50px;height:50px;border-radius:12px;background:#fff;display:grid;place-items:center;flex:none;color:var(--azul)}
.dir-cta{background:linear-gradient(110deg,var(--azul),#1a2868);border-radius:var(--radius-lg);padding:40px 44px;color:#fff;margin-top:30px}
.dir-cta h3{font-size:24px;margin-bottom:8px}
.dir-cta p{color:rgba(255,255,255,.78);margin-bottom:20px}

/* ---- contact ---- */
.contact-hero{background:linear-gradient(110deg,var(--azul),#1a2868);border-radius:var(--radius-lg);overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;color:#fff}
.contact-hero .txt{padding:60px}
.contact-hero .txt h1{font-size:clamp(30px,3.6vw,46px)}
.contact-hero .txt h1 .r{color:var(--rojo)}
.contact-hero .ph{position:relative;min-height:300px}
.contact-cols{display:grid;grid-template-columns:.85fr 1.2fr 1fr;gap:40px;margin-top:50px}
.ci-row{display:flex;gap:14px;margin-bottom:22px}
.ci-row .ci{width:44px;height:44px;border-radius:12px;background:var(--azul);display:grid;place-items:center;flex:none;color:#fff}
.ci-row .ci .area-ico{width:20px;height:20px}
.ci-row b{font-size:14.5px;display:block;margin-bottom:3px}
.ci-row p{font-size:13.5px;color:var(--muted);line-height:1.5}
.map-box{height:260px;border-radius:var(--radius);overflow:hidden;background:#e3e9f0;border:1px solid var(--line)}
.map-box iframe{width:100%;height:100%;border:0}

/* ---- afiliación embed ---- */
.afiliacion-wrap{max-width:820px;margin:0 auto}
.afiliacion-wrap .notice-sin-membresia{background:#fff4e5;border:1px solid #ffcf8f;color:#8a4b00;border-radius:12px;padding:16px 18px;margin-bottom:24px;font-size:14px}

/* ---- responsive ---- */
@media(max-width:980px){
  .hero-grid,.editorial,.bsplit,.split-hero,.prof-body,.contact-hero{grid-template-columns:1fr;gap:36px}
  .pillars,.prop-grid,.pv-card,.pv-items{grid-template-columns:repeat(2,1fr)}
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .history{grid-template-columns:repeat(3,1fr);gap:30px 14px}
  .history::before{display:none}
  .gallery,.contact-cols,.prof-facts{grid-template-columns:repeat(2,1fr)}
  .pillar::before,.prop::before{display:none}
  .prof-head{padding:90px 24px 26px;margin:-90px 12px 0}
  .prof-logo{width:110px;height:110px;top:-66px}
  .cta-final,.dir-cta{flex-direction:column;text-align:center}
  .split-hero .txt{padding:48px 0}
  .contact-hero .txt{padding:40px}
}
@media(max-width:600px){
  .pillars,.prop-grid,.pv-items,.bcards,.gallery,.contact-cols,.prof-facts,.news-grid{grid-template-columns:1fr}
  .collage{grid-template-rows:160px 120px 100px}
  .prof-head h1{font-size:26px}
}

/* — Imágenes de las franjas CTA (foto a la derecha, fundida en el azul) — */
.cta-final--photo,.dir-cta--photo{position:relative;overflow:hidden}
.cta-final--photo>*,.dir-cta--photo>*{position:relative;z-index:2}
.cta-final__photo,.dir-cta__photo{position:absolute;top:0;right:0;height:100%;width:46%;object-fit:cover;object-position:center;z-index:1;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 55%);mask-image:linear-gradient(90deg,transparent 0,#000 55%);pointer-events:none}
@media(max-width:860px){
  .cta-final__photo,.dir-cta__photo{display:none}
}
.area-brand--portal .area-brand__img{height:38px}