/**
 * Phontel — Rediseño v2 (Header + Home + Footer)
 * Fuente de verdad: phontel-home-mockup.html
 *
 * Scoping estricto para NO deformar páginas internas:
 *   - HEADER  -> .phh-header  (clase agregada al <header> de GP vía filtro)
 *   - HOME    -> #ph-home     (envuelve toda la portada)
 *   - FOOTER  -> .phf-footer  (footer editorial reemplazado)
 * Variables namespaceadas con prefijo --ph- para evitar colisiones.
 */

:root{
  --ph-azul:#1653d8; --ph-azul-osc:#0a2f8f; --ph-navy:#0a1430; --ph-cyan:#22d3ee;
  --ph-ink:#111a33; --ph-mut:#5b6b8c; --ph-line:#e7ecf6; --ph-bg:#f4f7fc; --ph-card:#fff;
  --ph-ok:#16a34a; --ph-r:16px;
  --ph-sombra:0 10px 30px rgba(14,30,80,.10); --ph-sombra-sm:0 2px 10px rgba(16,32,80,.06);
}

/* ══════════════════════════════════════════════════════════════
   HEADER  (scope: .phh-header sobre el .site-header de GeneratePress)
   ══════════════════════════════════════════════════════════════ */
.phh-header.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92)!important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ph-line);
  box-shadow:none!important;
}
.phh-header .inside-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; min-height:72px; padding-top:0; padding-bottom:0;
  flex-wrap:nowrap;
  max-width:1200px; width:100%; margin-left:auto; margin-right:auto;
}
/* En pantallas anchas, mantener el nav agrupado a la derecha sin gap gigante */
@media (min-width:1080px){
  .phh-header .inside-header{ justify-content:flex-start; gap:32px; }
  .phh-header .main-navigation{ margin-left:auto; }
}
.phh-header .site-logo{ margin:0; padding:0; line-height:0; }
.phh-header .site-logo img,
.phh-header .site-logo .header-image{
  height:34px!important; width:auto!important; max-width:210px; max-height:34px;
}
/* Nav a la derecha, en una sola línea */
.phh-header .main-navigation{
  background:transparent!important; box-shadow:none!important;
  flex:0 1 auto; margin:0;
}
.phh-header .main-navigation .inside-navigation{ padding:0; background:transparent; }
.phh-header .main-navigation ul{ list-style:none; margin:0; padding:0; }
@media (min-width:769px){
.phh-header .main-nav > ul.menu{
  display:flex; align-items:center; gap:2px; flex-wrap:nowrap;
}
.phh-header .main-nav > ul.menu > li{ position:relative; margin:0; float:none; }
.phh-header .main-nav > ul.menu > li > a{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 13px; border-radius:9px; line-height:1;
  font-size:15px; font-weight:600; color:#26334f; white-space:nowrap;
}
.phh-header .main-nav > ul.menu > li > a:hover,
.phh-header .main-nav > ul.menu > li.menu-item-has-children:hover > a{
  background:#eef3fe; color:var(--ph-azul);
}
/* Flechita del dropdown, discreta como en el mockup */
.phh-header .dropdown-menu-toggle{ padding:0 0 0 2px!important; line-height:0; }
.phh-header .gp-icon.icon-arrow svg{ width:.6em; height:.6em; opacity:.55; }

/* MEGA-MENÚ: la .sub-menu de GP como tarjeta flotante en hover/focus */
.phh-header .main-nav > ul.menu > li.menu-item-has-children > .sub-menu{
  position:absolute; top:calc(100% + 10px); left:0;
  display:block; width:auto; min-width:264px;
  background:#fff; border:1px solid var(--ph-line); border-radius:14px;
  box-shadow:var(--ph-sombra); padding:10px;
  opacity:0; visibility:hidden; transform:translateY(6px); pointer-events:none;
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  z-index:200;
}
.phh-header .main-nav > ul.menu > li.menu-item-has-children:hover > .sub-menu,
.phh-header .main-nav > ul.menu > li.menu-item-has-children:focus-within > .sub-menu,
.phh-header .main-nav > ul.menu > li.menu-item-has-children.phh-open > .sub-menu{
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
}
.phh-header .sub-menu li{ margin:0; float:none; }
.phh-header .sub-menu a{
  display:block; padding:9px 12px; border-radius:9px;
  font-size:14.5px; font-weight:500; color:#28344f; white-space:nowrap;
}
.phh-header .sub-menu a:hover{ background:#eef3fe; color:var(--ph-azul); }
} /* end @media (min-width:769px) — nav horizontal + mega-menú hover */

/* CTA "Buscar empresa" (último item, inyectado por hook) */
.phh-header .phh-cta-item{ margin-left:6px; }
.phh-header .phh-cta-item > a{
  background:var(--ph-azul)!important; color:#fff!important;
  padding:10px 17px!important; border-radius:10px;
  font-weight:700!important; font-size:14.5px;
  box-shadow:0 6px 16px rgba(22,83,216,.28);
}
.phh-header .phh-cta-item > a:hover{ background:var(--ph-azul-osc)!important; }

/* Mobile (<=768): GeneratePress maneja el toggle hamburguesa y el acordeón
   nativo de sub-menús (tap). Solo ajustes cosméticos; no interferimos con GP. */
@media (max-width:768px){
  .phh-header .inside-header{ min-height:60px; }
  .phh-header .phh-cta-item > a{ display:inline-block; margin:8px 20px; }
}

/* ══════════════════════════════════════════════════════════════
   HOME  (scope: #ph-home — full-bleed a viewport, .wrap centra a 1200)
   ══════════════════════════════════════════════════════════════ */
#ph-home{
  width:100vw!important; max-width:100vw!important;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  color:var(--ph-ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
#ph-home *{ box-sizing:border-box; }
#ph-home .wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }
#ph-home a{ color:inherit; text-decoration:none; }
#ph-home .eyebrow{ font-size:12.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ph-azul); }
#ph-home .h2{ font-size:24px; font-weight:800; color:var(--ph-navy); letter-spacing:-.015em; }
#ph-home .h2small{ color:var(--ph-mut); font-size:15px; margin:7px 0 22px; max-width:640px; }
#ph-home .center{ text-align:center; }
#ph-home .center .h2small{ margin-left:auto; margin-right:auto; }
#ph-home section.blk{ padding:40px 0; }

/* HERO */
#ph-home .hero{
  position:relative; overflow:hidden; color:#fff; padding:48px 0 58px;
  background:radial-gradient(900px 380px at 82% -20%,rgba(34,211,238,.35),transparent 60%),linear-gradient(135deg,#1a56de 0%,#0a2f8f 100%);
}
#ph-home .hero::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.10) 1.1px,transparent 1.1px);
  background-size:22px 22px; -webkit-mask:linear-gradient(180deg,#000,transparent 75%); mask:linear-gradient(180deg,#000,transparent 75%);
}
#ph-home .hero .wrap{ position:relative; }
#ph-home .pill{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  padding:6px 14px; border-radius:999px; font-size:12.5px; font-weight:800; letter-spacing:.03em; color:#fff;
}
#ph-home .pill .dot{ width:17px; height:17px; background:var(--ph-cyan); border-radius:50%; display:grid; place-items:center; color:#062d4d; font-size:11px; font-weight:900; }
#ph-home h1{ font-size:37px; line-height:1.12; letter-spacing:-.02em; margin:16px 0 14px; max-width:760px; font-weight:800; color:#fff; }
#ph-home .hero p.sub{ font-size:17px; color:#dbe6ff; max-width:660px; margin-bottom:24px; }
#ph-home .search{ display:flex; gap:10px; max-width:660px; background:#fff; padding:8px; border-radius:15px; box-shadow:0 14px 40px rgba(6,20,60,.28); }
#ph-home .search .mag{ display:grid; place-items:center; padding-left:8px; color:#93a0bd; }
#ph-home .search input{ flex:1; border:0; outline:0; padding:12px 8px; font-size:16px; color:var(--ph-ink); background:transparent; }
#ph-home .search button{ background:var(--ph-azul); color:#fff; border:0; padding:0 28px; border-radius:11px; font-weight:700; font-size:16px; cursor:pointer; }
#ph-home .search button:hover{ background:var(--ph-azul-osc); }
#ph-home .herobtns{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
#ph-home .btn2{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.32); color:#fff; padding:11px 18px; border-radius:11px; font-weight:700; font-size:14.5px; }
#ph-home .btn2:hover{ background:rgba(255,255,255,.22); }

/* STATS */
#ph-home .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:-38px; position:relative; z-index:5; }
#ph-home .stat{ background:#fff; border:1px solid var(--ph-line); border-radius:var(--ph-r); padding:18px 20px; box-shadow:var(--ph-sombra); }
#ph-home .stat .n{ font-size:23px; font-weight:800; color:var(--ph-navy); display:flex; align-items:center; gap:8px; }
#ph-home .stat .n svg{ width:22px; height:22px; flex:none; }
#ph-home .stat .t{ color:var(--ph-mut); font-size:13.5px; margin-top:3px; }

/* LOGO WALL */
#ph-home .logos{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
#ph-home .lt{ background:#fff; border:1px solid var(--ph-line); border-radius:13px; height:72px; display:grid; place-items:center; box-shadow:var(--ph-sombra-sm); transition:.15s; text-align:center; }
#ph-home .lt:hover{ transform:translateY(-2px); box-shadow:var(--ph-sombra); border-color:#d6e0f6; }
#ph-home .lt .lt-word{ font-weight:800; font-size:17px; letter-spacing:-.02em; }
#ph-home .lt .lt-logo{ display:grid; place-items:center; width:100%; height:100%; padding:6px; }
#ph-home .lt .lt-logo img{ max-height:38px; max-width:130px; width:auto !important; height:auto !important; object-fit:contain; filter:grayscale(1); opacity:.72; transition:filter .15s, opacity .15s; }
#ph-home .lt:hover .lt-logo img{ filter:none; opacity:1; }
#ph-home .lt.more span{ font-weight:800; font-size:15px; }
#ph-home .lt.more{ border-style:dashed; color:var(--ph-azul); font-weight:800; }

/* VERTICALES */
#ph-home .cards4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
#ph-home .vcard{ position:relative; background:#fff; border:1px solid var(--ph-line); border-radius:var(--ph-r); padding:24px 22px 22px; box-shadow:var(--ph-sombra-sm); transition:.16s; overflow:hidden; display:block; }
#ph-home .vcard::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--ph-azul),var(--ph-cyan)); }
#ph-home .vcard:hover{ transform:translateY(-4px); box-shadow:var(--ph-sombra); border-color:#cfdaf5; }
#ph-home .vic{ width:50px; height:50px; border-radius:13px; display:grid; place-items:center; font-size:24px; margin-bottom:14px; background:linear-gradient(135deg,#e9f1ff,#e6fbff); box-shadow:inset 0 0 0 1px #dbe7ff; }
#ph-home .vcard h3{ font-size:18px; color:var(--ph-navy); margin-bottom:6px; }
#ph-home .vcard p{ font-size:14px; color:var(--ph-mut); }
#ph-home .vcard .go{ color:var(--ph-azul); font-weight:700; font-size:14px; margin-top:14px; display:inline-block; }

/* CIUDADES */
#ph-home .cities{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
#ph-home .city{ position:relative; height:180px; border-radius:var(--ph-r); overflow:hidden; box-shadow:var(--ph-sombra-sm); transition:.18s; isolation:isolate; display:block; }
#ph-home .city:hover{ transform:translateY(-4px); box-shadow:var(--ph-sombra); }
#ph-home .city .grad{ position:absolute; inset:0; z-index:-3; }
#ph-home .city .photo{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; } /* foto real */
#ph-home .city .sky{ position:absolute; left:0; right:0; bottom:0; z-index:-1; opacity:.28; }
#ph-home .city.has-photo .sky{ display:none; }
#ph-home .city .veil{ position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(6,12,35,0) 30%,rgba(6,12,35,.62) 100%); }
#ph-home .city.has-photo .veil{ background:linear-gradient(180deg,rgba(6,12,35,.15) 0%,rgba(6,12,35,.72) 100%); }
#ph-home .city .body{ position:absolute; left:16px; right:16px; bottom:14px; color:#fff; }
#ph-home .city .cn{ font-size:19px; font-weight:800; letter-spacing:-.01em; }
#ph-home .city .cc{ font-size:12.5px; color:#e7eeff; font-weight:600; opacity:.95; margin-top:2px; }
#ph-home .city .flag{ position:absolute; top:12px; left:12px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:#fff; font-size:11px; font-weight:800; padding:4px 9px; border-radius:999px; }

/* CTA banda */
#ph-home .ctaband{ background:linear-gradient(135deg,#0a2f8f,#1653d8); border-radius:20px; padding:34px 36px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; box-shadow:var(--ph-sombra); }
#ph-home .ctaband h3{ font-size:23px; font-weight:800; color:#fff; }
#ph-home .ctaband p{ color:#cfdcff; font-size:15px; margin-top:4px; }
#ph-home .ctaband .b{ background:#fff; color:var(--ph-azul); padding:13px 22px; border-radius:12px; font-weight:800; white-space:nowrap; }

/* TRÁMITES FRECUENTES (chips de links internos SEO) */
#ph-home .trams{ display:flex; flex-wrap:wrap; gap:10px; }
#ph-home .tram{ display:inline-flex; align-items:center; background:#fff; border:1px solid var(--ph-line); border-radius:999px; padding:9px 16px; font-size:14px; font-weight:600; color:#28344f; box-shadow:var(--ph-sombra-sm); transition:transform .15s, border-color .15s, color .15s; }
#ph-home .tram:hover{ border-color:#cfdaf5; color:var(--ph-azul); transform:translateY(-1px); }

/* RESUMEN EDITORIAL (copy SEO) */
#ph-home .seocopy h2{ font-size:20px; color:var(--ph-navy); margin-bottom:8px; letter-spacing:-.01em; }
#ph-home .seocopy p{ font-size:14.5px; color:var(--ph-mut); max-width:820px; }

/* ANUNCIOS PROPIOS (banners de home) */
#ph-home .ph-home-ads{ margin:6px auto 0; }
#ph-home .ph-home-ads:empty{ display:none; }

/* ══════════════════════════════════════════════════════════════
   FOOTER  (scope: .phf-footer)
   ══════════════════════════════════════════════════════════════ */
.phf-footer{ background:var(--ph-navy); color:#c4cfe6; margin-top:26px; padding:50px 0 26px; border:0; }
.phf-footer *{ box-sizing:border-box; }
.phf-footer a{ color:inherit; text-decoration:none; }
.phf-footer .phf-wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }
.phf-footer .phf-grid{ display:grid; grid-template-columns:1.8fr repeat(4,1fr); gap:26px; }
.phf-footer h4{ color:#fff; font-size:13px; margin:0 0 13px; text-transform:uppercase; letter-spacing:.06em; }
.phf-footer ul{ list-style:none; margin:0; padding:0; }
.phf-footer li{ margin:8px 0; font-size:14px; }
.phf-footer li a:hover{ color:#fff; }
.phf-footer .phf-brand{ font-weight:800; font-size:20px; color:#fff; display:flex; align-items:center; gap:9px; margin-bottom:11px; }
.phf-footer .phf-brand .mark{ width:28px; height:28px; border-radius:9px; background:linear-gradient(135deg,var(--ph-azul),var(--ph-cyan)); display:inline-block; }
.phf-footer .phf-note{ font-size:13.5px; color:#8fa0c2; max-width:340px; margin-bottom:14px; }
.phf-footer .phf-meta{ font-size:12.5px; color:#8093b6; max-width:340px; border-left:2px solid rgba(255,255,255,.14); padding-left:11px; margin-bottom:12px; }
.phf-footer .phf-meta b{ color:#c4cfe6; font-weight:700; }
.phf-footer .phf-contact a{ color:var(--ph-cyan); font-weight:600; font-size:13.5px; }
.phf-footer .phf-bar{ border-top:1px solid rgba(255,255,255,.1); margin-top:32px; padding-top:16px; font-size:12.5px; color:#8fa0c2; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; align-items:center; }
.phf-footer .phf-legal{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.phf-footer .phf-legal a:hover{ color:#fff; }
.phf-footer .phf-cred a{ color:#c4cfe6; font-weight:600; }
.phf-footer .phf-cred a:hover{ color:#fff; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width:960px){
  #ph-home .stats,
  #ph-home .logos{ grid-template-columns:repeat(2,1fr); }
  #ph-home .cards4,
  #ph-home .cities{ grid-template-columns:repeat(2,1fr); }
  #ph-home h1{ font-size:34px; }
  .phf-footer .phf-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  #ph-home .logos{ grid-template-columns:repeat(2,1fr); }
  #ph-home .cards4,
  #ph-home .cities,
  #ph-home .stats{ grid-template-columns:1fr; }
  #ph-home .search{ flex-wrap:wrap; }
  #ph-home .search button{ width:100%; padding:12px; }
  .phf-footer .phf-grid{ grid-template-columns:1fr; }
}