/* Miniaturas fotográficas reales (recortes de la foto de la finca)
   en lugar de emojis: ver static/img/iconos/. Se carga al final. */
.ph {
  background-color: #e9e2d4 !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  font-size: 0 !important;
  color: transparent !important;
  overflow: hidden;
}
.ph-entera  { background-image: url("../img/iconos/entera.jpg") !important; }
.ph-mitad   { background-image: url("../img/iconos/mitad.jpg") !important; }
.ph-mitad2  { background-image: url("../img/iconos/mitad2.jpg") !important; }
.ph-hoja    { background-image: url("../img/iconos/hoja.jpg") !important; }
.ph-paisaje { background-image: url("../img/iconos/paisaje.jpg") !important; }
.ph-ladera  { background-image: url("../img/iconos/ladera.jpg") !important; }
.ph-casa    { background-image: url("../img/iconos/casa.jpg") !important; }
.ph-arbol   { background-image: url("../img/iconos/arbol.jpg") !important; }
.ph-madera  { background-image: url("../img/iconos/madera.jpg") !important; }

/* Lista de perfil: miniaturas más grandes, con marco blanco */
.feat-icon.ph {
  width: 76px; height: 76px; border-radius: 20px;
  border: 3px solid #fff;
  box-shadow: 0 10px 22px rgba(20,48,26,0.28), 0 0 0 1px rgba(20,48,26,0.08);
}
.features-list li { align-items: center; }

/* Tarjetas de nutrición: foto circular que sobresale */
.nutri-icon-wrap.ph {
  width: 84px; height: 84px; border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 12px 26px rgba(0,0,0,0.25);
}

/* Banner de identidad */
.regional-phrase-item .rp-icon.ph {
  width: 84px; height: 84px; border-radius: 22px;
  border: 3px solid rgba(255,255,255,0.9);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}

/* Pasos del proceso */
.tl-dot.ph {
  width: 92px; height: 92px; border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 14px 28px rgba(20,48,26,0.35), 0 0 0 7px rgba(90,158,79,0.22);
}

/* Indicadores de calidad: foto en el icono flotante */
.quality-card::before {
  content: '' !important;
  width: 72px !important; height: 72px !important; top: -36px !important;
  border-radius: 50% !important;
  background-size: cover !important; background-position: center !important;
  border: 4px solid #fff !important;
  box-shadow: 0 12px 26px rgba(20,48,26,0.35) !important;
}
.quality-card { padding-top: 3.2rem !important; }
.quality-card:nth-child(1)::before { background-image: url("../img/iconos/madera.jpg") !important; }
.quality-card:nth-child(2)::before { background-image: url("../img/iconos/entera.jpg") !important; }
.quality-card:nth-child(3)::before { background-image: url("../img/iconos/mitad2.jpg") !important; }
.quality-card:nth-child(4)::before { background-image: url("../img/iconos/hoja.jpg") !important; }

/* ══ CABECERA OSCURA CON FOTO (barra superior + menú) ══ */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background:
    linear-gradient(90deg, rgba(8,24,8,0.96), rgba(12,32,12,0.80)),
    var(--foto) center 6% / cover no-repeat;
  padding: 0.45rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.topbar-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.22rem 1rem 0.22rem 0.3rem; }
.tb-thumb {
  display: inline-block; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.4); flex-shrink: 0;
}
.topbar-info { display: none; align-items: center; gap: 1.4rem; margin-right: auto; }
.topbar-info span {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: none;
  color: rgba(255,255,255,0.92);
}
@media (min-width: 900px) { .topbar-info { display: flex; } }

.site-header {
  background:
    linear-gradient(90deg, rgba(10,28,10,0.95) 0%, rgba(16,40,16,0.86) 100%),
    var(--foto) center 40% / cover no-repeat;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, #f08a7e, #f4f08a 50%, #7bbb6e) 1;
  box-shadow: 0 10px 30px rgba(8,24,8,0.35);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 0.8rem clamp(1rem, 4vw, 3rem);
}
.brand img { background: #fff; outline: 3px solid #f08a7e; border: 3px solid #fff; height: 60px; width: 60px; }
.brand-name h1 { color: #fff; font-size: 1.45rem; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.brand-name span { color: #ffc4b8; }

.nav-links {
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px; padding: 0.3rem 0.35rem 0.3rem 0.6rem; gap: 0.1rem;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.nav-links a:not(.btn-contacto) { color: rgba(255,255,255,0.92); }
.nav-links a:not(.btn-contacto):hover { color: #fff; background: rgba(255,255,255,0.14); }
.nav-links a:not(.btn-contacto)::after { bottom: 0.15rem; }
.nav-links .btn-contacto {
  display: inline-flex; align-items: center; gap: 0.45rem; margin-left: 0.3rem;
  background: linear-gradient(135deg, #25d366, #128c4a); color: #fff;
  box-shadow: 0 8px 20px rgba(18,140,74,0.45), inset 0 1px 0 rgba(255,255,255,0.35);
}
.nav-links .btn-contacto:hover { background: linear-gradient(135deg, #3ae07a, #159c53); transform: translateY(-2px); }
.nav-links .btn-contacto svg { flex-shrink: 0; }

@media (max-width: 639px) {
  .nav-links { background: none; border: none; padding: 0; }
  .brand img { height: 48px; width: 48px; }
  .brand-name h1 { font-size: 1.15rem; }
  .brand-name span { display: none; }
}

/* Panel de administración */
.q-ico.ph, .stat-ico.ph { border-radius: 16px; }