.onp-single { background:#f6f7f8; }

/* Container: aire lateral */
.onp-container{
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 32px;
}
@media (max-width: 560px){
	.onp-container{ padding: 0 16px; }
}
.onp-container-pad{ padding-top: 26px; padding-bottom: 54px; }

/* HERO / SLIDER */
.onp-hero-wide{ width:100%; margin:0; }
.onp-slider-wide{
	position:relative;
	width:100%;
	overflow:hidden;
	background:#000;
}

/* Slides: viewport */
.onp-slider-wide .onp-slide{
	display:none;
	width:100%;
	height: 92vh;
	min-height: 640px;
}
.onp-slider-wide .onp-slide.is-active{ display:block; }
@media (max-width: 900px){
	.onp-slider-wide .onp-slide{ height: 72vh; min-height: 420px; }
}
@media (max-width: 560px){
	.onp-slider-wide .onp-slide{ height: 56vh; min-height: 320px; }
}

/* ✅ FULL COVER (adiós franjas negras) */
.onp-slider-wide img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	display:block;
}

/* overlay título */
.onp-hero-overlay{
	position:absolute;
	left:0; right:0; bottom:0;
	padding: 46px 0 26px;
	background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0));
}
.onp-title{
	margin:0;
	color:#fff;
	font-size: 44px;
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-shadow: 0 12px 40px rgba(0,0,0,.55);
}
@media (max-width:560px){ .onp-title{ font-size: 28px; } }

.onp-subtitle{
	margin-top:10px;
	color: rgba(255,255,255,.92);
	font-size: 16px;
	text-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.onp-hero-meta{
	margin-top: 14px;
	display:flex;
	gap:10px;
	flex-wrap:wrap;
}
.onp-pill{
	display:inline-flex;
	align-items:center;
	padding: 7px 11px;
	border-radius: 999px;
	background: rgba(255,255,255,.14);
	color:#fff;
	font-size: 12px;
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255,255,255,.18);
}

/* nav */
.onp-nav{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	border:0;
	width: 46px;
	height: 46px;
	border-radius: 999px;
	background: rgba(0,0,0,.35);
	color:#fff;
	font-size: 28px;
	line-height: 46px;
	cursor:pointer;
	z-index: 5;
}
.onp-nav.prev{ left: 18px; }
.onp-nav.next{ right: 18px; }

.onp-dots{
	position:absolute;
	left:0; right:0;
	bottom: 16px;
	display:flex;
	justify-content:center;
	gap:8px;
	z-index: 5;
}
.onp-dots button{
	width: 8px; height: 8px;
	border-radius: 99px;
	border:0;
	background: rgba(255,255,255,.45);
	cursor:pointer;
}
.onp-dots button.is-active{ background: rgba(255,255,255,.95); width: 18px; }

/* ✅ REGla de oro: TODAS las cajas iguales */
.onp-section,
.onp-summary{
	background:#fff;
	border-radius: 20px;
	padding: 30px 40px;
	margin-bottom: 24px;
	box-shadow: 0 12px 40px rgba(0,0,0,.08);
	border: 1px solid rgba(0,0,0,.05);
}
/*CAJAS DE ICONOS OBRA NUEVA*/
.onp-kpi {
    margin-bottom: -12px;
}

@media (max-width:560px){
	.onp-section,
	.onp-summary{ padding: 18px; margin-bottom: 18px; }
}

/* H2 */
.onp-h2{
	margin:0 0 12px;
	font-size: 18px;
	color: var(--onp-primary);
	letter-spacing: -0.01em;
	font-weight: 700;
}

/* SUMMARY / KPIs */
.onp-kpis{
	display:grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
}
@media (max-width: 980px){
	.onp-kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
	.onp-kpis{ grid-template-columns: 1fr; }
}

.onp-kpi{
	background:#f7f7f7;
	border-radius: 16px;
	padding: 14px 16px;
	font-weight: 650;
	display:flex;
	flex-direction:column;
	gap:4px;
}
.onp-kpi-label{ font-size: 12px; opacity:.72; font-weight:700; }
.onp-kpi-value{ font-size: 20px; font-weight: 750; }
.onp-kpi-accent{ color: var(--onp-accent); }

/* icon item */
.onp-icon-item{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-weight: 700;
}
.onp-icon-item svg{ width:30px; height:30px; fill: currentColor; opacity:.9; }

/* buttons row */
.onp-actions-row{
	margin-top: 14px;
	display:flex;
	gap: 10px;
	flex-wrap:wrap;
}
.onp-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding: 12px 14px;
	border-radius: var(--onp-radius);
	background: var(--onp-primary);
	color:#fff !important;
	text-decoration:none !important;
	font-weight: 750;
	font-size: 14px;
	box-shadow: 0 10px 26px rgba(0,0,0,.14);
	transition: transform .15s ease, opacity .15s ease;
}
.onp-btn:hover{ opacity:.93; transform: translateY(-1px); }
.onp-btn-wide{ width:100%; }

/* share */
.onp-share{
	margin-top: 14px;
	display:flex;
	align-items:center;
	gap: 10px;
	flex-wrap:wrap;
}
.onp-share-title{ font-weight:750; opacity:.8; }
.onp-share-buttons{ display:flex; gap:8px; }
.onp-share-btn{
	width: 40px; height: 40px;
	border-radius: 14px;
	background: #f1f1f1;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border: 1px solid rgba(0,0,0,.06);
}
.onp-share-btn svg{ width: 18px; height: 18px; fill: #111; opacity:.9; }

.onp-intro{ margin-top: 12px; opacity:.92; line-height: 1.75; }

/* GRID */
.onp-main-grid{
	display:grid;
	grid-template-columns: 1fr 370px;
	gap: 24px;
	align-items:start;
}
@media (max-width: 980px){
	.onp-main-grid{ grid-template-columns: 1fr; }
}

/* VIDEO: caja elegante, no gigante */
.onp-video{
	max-width: 720px;
	margin: 0 auto;
	border-radius: 18px;
	overflow:hidden;
	background:#000;
	box-shadow: 0 18px 60px rgba(0,0,0,.18);
}
.onp-video iframe,
.onp-video embed,
.onp-video object{
	width:100%;
	aspect-ratio: 16/9;
	height:auto;
	display:block;
	border:0;
}

/* CONTENT */
.onp-content{ line-height: 1.85; font-size: 14px; }

/* ENERGÍA */
.onp-energy{
	display:flex;
	align-items:center;
	gap: 14px;
	flex-wrap:wrap;
}
.onp-energy-badge{
	width: 64px;
	height: 64px;
	border-radius: 16px;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	font-weight: 700;
	font-size: 28px;
	box-shadow: 0 10px 26px rgba(0,0,0,.16);
}
.onp-energy-meta{
	display:flex;
	gap: 10px;
	flex-wrap:wrap;
	align-items:center;
}
.onp-energy-chip{
	background:#f7f7f7;
	border-radius: 14px;
	padding: 10px 12px;
	font-weight: 600;
	border: 1px solid rgba(0,0,0,.05);
}

/* Unidades pequeñas en certificado */
.onp-unit{
	font-size: 12px;
	opacity: .75;
	margin-left: 6px;
	font-weight: 500;
}

/* Botón secundario (para "Ver etiqueta") */
.onp-btn-secondary{
	background: #111 !important;
	color: #fff !important;
	opacity: .92;
}
.onp-btn-secondary:hover{ opacity: .98; }

/* Badge energía por clase */
.onp-energy-badge-A{ background:#009a44; }
.onp-energy-badge-B{ background:#5cb85c; }
.onp-energy-badge-C{ background:#bada55; color:#111; }
.onp-energy-badge-D{ background:#f0ad4e; color:#111; }
.onp-energy-badge-E{ background:#f07c00; }
.onp-energy-badge-F{ background:#d9534f; }
.onp-energy-badge-G{ background:#b52b27; }

/* ===== Modal etiqueta energética ===== */
.onp-energy-modal{
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.72);
	z-index: 999999;
	display:flex;
	align-items:center;
	justify-content:center;
	padding: 22px;
}
.onp-energy-modal-card{
	position: relative;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 30px 120px rgba(0,0,0,.45);
	width: min(720px, 94vw);
	padding: 18px;
}
.onp-energy-modal-close{
	position:absolute;
	top: 12px;
	right: 12px;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border:0;
	background: rgba(0,0,0,.08);
	font-size: 28px;
	cursor:pointer;
}
.onp-energy-label-title{
	font-weight: 700;
	font-size: 18px;
	margin-bottom: 12px;
	color: var(--onp-primary);
}
.onp-energy-scale{ display:grid; gap: 8px; }
.onp-energy-row{
	display:flex;
	align-items:center;
	justify-content: space-between;
	padding: 10px 12px;
	border-radius: 12px;
	color:#fff;
	font-weight: 700;
}
.onp-energy-row.is-active{
	outline: 3px solid rgba(0,0,0,.18);
	transform: translateY(-1px);
}
.onp-energy-row.row-A{ background:#009a44; }
.onp-energy-row.row-B{ background:#5cb85c; }
.onp-energy-row.row-C{ background:#bada55; color:#111; }
.onp-energy-row.row-D{ background:#f0ad4e; color:#111; }
.onp-energy-row.row-E{ background:#f07c00; }
.onp-energy-row.row-F{ background:#d9534f; }
.onp-energy-row.row-G{ background:#b52b27; }

.onp-energy-values{
	margin-top: 14px;
	display:grid;
	gap: 8px;
	font-weight: 600;
}
.onp-energy-foot{
	margin-top: 12px;
	font-size: 12px;
	opacity: .75;
	line-height: 1.4;
}

/* FORM sticky */
.onp-form-card{
	background:#fff;
	border-radius: 20px;
	box-shadow: 0 16px 60px rgba(0,0,0,.16);
	padding: 20px;
	position: sticky;
	top: 18px;
	border: 1px solid rgba(0,0,0,.06);
	align-self:start;
     z-index: 30;
}
/* =====================================================
 * NUEVO: Aside preparado para sticky/fixed del formulario
 * ===================================================== */
.onp-aside{
  position: relative;
  align-self: stretch;
}

.onp-form-title{
	margin:0 0 14px;
	font-size: 20px;
	color:#111;
	font-weight: 700;
}
.onp-form .onp-field{ display:block; margin-bottom: 12px; }
.onp-form .onp-field input,
.onp-form .onp-field textarea{
	width: 100%;
	padding: 12px 12px;
	border-radius: 12px;
	border: 1px solid rgba(0,0,0,.16);
	background:#fff;
	font-size: 14px;
	outline:none;
}
.onp-form .onp-field input:focus,
.onp-form .onp-field textarea:focus{
	border-color: rgba(0,0,0,.35);
	box-shadow: 0 0 0 4px rgba(0,0,0,.06);
}
.onp-rgpd{
	display:flex;
	gap: 10px;
	align-items:flex-start;
	font-size: 13px;
	margin: 10px 0 14px;
}
.onp-rgpd a{ color: var(--onp-accent); font-weight: 600; }

.onp-form-ok{
	background: #e8fff1;
	border: 1px solid #b6f2cb;
	padding: 12px 12px;
	border-radius: 12px;
	margin-bottom: 12px;
	font-weight: 600;
}
.onp-form-err{
	background: #ffecec;
	border: 1px solid #f6b8b8;
	padding: 12px 12px;
	border-radius: 12px;
	margin-bottom: 12px;
	font-weight: 600;
}

.onp-contact-mini{
	margin-top: 14px;
	font-size: 13px;
	opacity:.92;
	display:grid;
	gap: 8px;
}

/* Sticky se rompe si algún padre tiene overflow o transform */
.onp-main-grid,
.onp-container,
.onp-container-pad{
	overflow: visible !important;
	transform: none !important;
}

/* ===== Gallery grid + lightbox ===== */
.onp-gallery-grid{
	display:grid;
	grid-template-columns: repeat(3, minmax(0,1fr));
	gap: 14px;
}
@media (max-width: 900px){
	.onp-gallery-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
	.onp-gallery-grid{ grid-template-columns: 1fr; }
}

.onp-gallery-item{
	position: relative;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 12px 36px rgba(0,0,0,.10);
	border: 1px solid rgba(0,0,0,.06);
}
.onp-gallery-item img{
	width:100%;
	height: 220px;
	object-fit: cover;
	display:block;
}
@media (max-width:560px){
	.onp-gallery-item img{ height: 210px; }
}

.onp-gallery-item.has-more::after{
	content:"";
	position:absolute;
	inset:0;
	background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0.15));
}

.onp-gallery-more{
	position:absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	background: rgba(255,255,255,.92);
	color:#111;
	padding: 10px 14px;
	border-radius: 999px;
	font-weight: 600;
	border: 1px solid rgba(0,0,0,.10);
}

.onp-gallery-showall{
	margin-top: 14px;
	border: 1px solid rgba(0,0,0,.12);
	background: #fff;
	padding: 10px 14px;
	border-radius: 14px;
	cursor:pointer;
	font-weight: 600;
}

/* Lightbox */
.onp-noscroll{ overflow:hidden; }

.onp-lightbox{
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.86);
	z-index: 999999;
	display:flex;
	align-items:center;
	justify-content:center;
	padding: 24px;
}
.onp-lightbox-img{
	max-width: min(1200px, 92vw);
	max-height: 90vh;
	border-radius: 18px;
	box-shadow: 0 20px 80px rgba(0,0,0,.45);
}

.onp-lightbox-close{
	position:absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border:0;
	background: rgba(255,255,255,.18);
	color:#fff;
	font-size: 28px;
	cursor:pointer;
}

.onp-lightbox-nav{
	position:absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 54px;
	height: 54px;
	border-radius: 999px;
	border:0;
	background: rgba(255,255,255,.14);
	color:#fff;
	font-size: 34px;
	cursor:pointer;
}
.onp-lightbox-nav.prev{ left: 16px; }
.onp-lightbox-nav.next{ right: 16px; }

/* =========================
   DOCUMENTOS (tarjetas)
   (icono PDF “normal”)
========================= */
.onp-documents{
	display:grid;
	gap: 12px;
	margin-top: 12px;
}

.onp-doc{
	display:flex;
	align-items:center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: 16px;
	background:#fff;
	border: 1px solid rgba(0,0,0,.06);
	text-decoration:none !important;
	color:#111 !important;
	box-shadow: 0 10px 30px rgba(0,0,0,.05);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.onp-doc:hover{
	transform: translateY(-1px);
	border-color: rgba(0,0,0,.10);
	box-shadow: 0 14px 40px rgba(0,0,0,.07);
}

/* contenedor del icono */
.onp-doc-ico{
	width: 44px;
	height: 44px;
	border-radius: 14px;
	display:flex;
	align-items:center;
	justify-content:center;
	background: #f3f4f6;
	border: 1px solid rgba(0,0,0,.06);
	flex: 0 0 44px;
}

/* si metes un SVG dentro (recomendado desde PHP) */
.onp-doc-ico svg{
	width: 24px;
	height: 24px;
	display:block;
}

/* fallback si no hay svg y dejas texto */
.onp-doc-ico span{
	font-weight: 600;
	font-size: 12px;
	color: #e11d48;
	letter-spacing:.02em;
}

.onp-doc-title{
	font-weight: 600;
	font-size: 16px;
	color:#111;
	line-height: 1.25;
}
@media (max-width:560px){
	.onp-doc-title{ font-size: 15px; }
}

/* =========================
   TIPOLOGÍAS (tabla estilo captura)
   (menos “pegotón”)
========================= */
.onp-typologies{ margin-top: 6px; }

.onp-typo-wrap{
	margin-top: 12px;
	border-radius: 16px;
	overflow:hidden;
	border: 1px solid rgba(0,0,0,.06);
	box-shadow: 0 10px 28px rgba(0,0,0,.05);
	background:#fff;
}

/* cabecera negra */
.onp-typo-head{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap: 12px;
	padding: 14px 16px;
	background: var(--onp-primary);
	color:#fff;
	font-weight: 750;
}
.onp-typo-head-left{
	font-size: 16px;
}
.onp-typo-head-right{
	font-size: 14px;
	opacity:.95;
}

/* tabla */
.onp-typo-table{
	background:#fff;
}

/* fila genérica */
.onp-typo-row{
	display:grid;
	grid-template-columns: 92px 170px 80px 86px 160px 95px 120px 120px 58px;
	align-items:center;
	gap: 10px;
	padding: 14px 16px;
	border-top: 1px solid rgba(0,0,0,.06);
	font-size: 14px;
}

/* cabecera columnas */
.onp-typo-row--th{
	background:#f2f6fb;
	font-weight: 700;
	color:#555;
	border-top: 0;
	padding-top: 13px;
	padding-bottom: 13px;
}

/* filas */
.onp-typo-row.is-available{
	background:#fff;
}
.onp-typo-row.is-unavailable{
	background:#f7f7f7;
	opacity:.70;
}

/* foto */
.onp-typo-photo{
	position:relative;
}
.onp-typo-photo img{
	width: 68px;
	height: 52px;
	object-fit: cover;
	border-radius: 12px;
	border: 1px solid rgba(0,0,0,.10);
	display:block;
	background:#fff;
}
.onp-typo-status{
	position:absolute;
	left: 6px;
	top: 6px;
	background: rgba(0,0,0,.65);
	color:#fff;
	font-weight: 700;
	padding: 5px 9px;
	border-radius: 999px;
	font-size: 12px;
	line-height: 1;
}

/* precio */
.onp-typo-price{
	font-weight: 700;
	color: var(--onp-accent);
	font-size: 19px;
	letter-spacing: -0.01em;
}
.onp-typo-row.is-unavailable .onp-typo-price{
	color:#6b7280;
	font-weight: 750;
	font-size: 18px;
}

/* botón flecha */
.onp-typo-go{
	display:flex;
	justify-content:flex-end;
}
.onp-typo-go::after{
	content: "›";
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: #f1f5ff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size: 28px;
	color: var(--onp-primary);
	box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* Responsive: scroll horizontal natural */
@media (max-width: 980px){
	.onp-typo-wrap{ overflow:auto; }
	.onp-typo-table{ min-width: 980px; }
}

/* Mobile: mostramos lo esencial */
@media (max-width: 720px){
	.onp-typo-row{
		grid-template-columns: 92px 1fr 64px 58px;
		row-gap: 6px;
	}
	.onp-typo-row > div:nth-child(n+5){ display:none; }
	.onp-typo-row--th > div:nth-child(n+5){ display:none; }
	.onp-typo-price{ font-size: 18px; }
}
/* FIX definitivo: si algo pisa el icono y lo vuelve “negro” */
.onp-documents .onp-doc .onp-doc-ico{
  background: #f3f4f6 !important;
  color: #e11d48 !important;
}
.onp-documents .onp-doc .onp-doc-ico svg{ display:block; }


.onp-planos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}

/* =====================================================
 * NUEVO: Columna Planos + modal
 * ===================================================== */
.onp-typo-planos-cell{ display:flex; align-items:center; justify-content:center; }
.onp-plan-empty{ opacity:.45; }

.onp-plan-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border:0; border-radius:999px;
  background: rgba(0,0,0,.04);
  cursor:pointer;
  position:relative;
}
.onp-plan-btn:hover{ background: rgba(0,0,0,.07); }
.onp-plan-ico svg{ width:22px; height:22px; }

.onp-plan-badge{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px;
  padding:0 5px;
  border-radius:999px;
  background: var(--onp-accent);
  color:#000;
  font-size:11px;
  line-height:18px;
  font-weight:700;
}

/* Modal */
.onp-plan-modal{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  z-index:99999;
  padding:16px;
}
.onp-plan-modal-card{
  width:min(1100px, 96vw);
  height:min(720px, 88vh);
  background:#fff;
  border-radius: 18px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.onp-plan-stage{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
}
.onp-plan-frame{ width:100%; height:100%; border:0; }
.onp-plan-img{ max-width:100%; max-height:100%; }

.onp-plan-close{
  position:absolute; top:10px; right:12px;
  width:40px; height:40px;
  border:0; border-radius:999px;
  background: rgba(0,0,0,.06);
  font-size:24px;
  cursor:pointer;
}
.onp-plan-nav{
  position:absolute; top:50%;
  transform:translateY(-50%);
  width:44px; height:44px;
  border:0; border-radius:999px;
  background: rgba(0,0,0,.06);
  font-size:26px;
  cursor:pointer;
}
.onp-plan-nav.prev{ left:12px; }
.onp-plan-nav.next{ right:12px; }

html.onp-modal-open{ overflow:hidden; }

/* =====================================================
 * MOBILE: estructura principal
 * ===================================================== */
@media (max-width: 980px) {

  .onp-container,
  .onp-container-pad {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .onp-main-grid {
    display: block; /* rompe grid en móvil */
  }

  .onp-main,
  .onp-aside {
    width: 100%;
    max-width: 100%;
  }

}

/* =====================================================
 * MOBILE: vídeos responsivos
 * ===================================================== */
@media (max-width: 980px) {

  .onp-video,
  .onp-video iframe {
    width: 100% !important;
    max-width: 100% !important;
  }

  .onp-video iframe {
    aspect-ratio: 16 / 9;
    height: auto;
  }

}

/* =====================================================
 * MOBILE: galería fotos
 * ===================================================== */
@media (max-width: 980px) {

  .onp-gallery,
  .onp-gallery-grid {
    max-width: 100%;
    overflow: hidden;
  }

  .onp-gallery-item {
    width: 100%;
  }

}

/* =====================================================
 * MOBILE: mapa
 * ===================================================== */
@media (max-width: 980px) {

  .onp-map,
  .onp-map iframe {
    width: 100% !important;
    max-width: 100% !important;
  }

}

/* =====================================================
 * MOBILE: tipologías (scroll horizontal controlado)
 * ===================================================== */
@media (max-width: 980px) {

  .onp-typologies .onp-typo-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .onp-typo-table {
    min-width: 820px; /* permite scroll interno */
  }

}

/* =====================================================
 * MOBILE: documentos
 * ===================================================== */
@media (max-width: 980px) {

  .onp-documents {
    max-width: 100%;
    overflow: hidden;
  }

}


/* =====================================================
 * MOBILE: Tipologías – solo columnas clave
 * Precio · Habs · Baños · Planos
 * ===================================================== */
@media (max-width: 980px) {

  /* Quitamos scroll interno: ahora debe CABER */
  .onp-typologies .onp-typo-wrap {
    overflow-x: hidden;
  }

  .onp-typo-table {
    min-width: 0;
    width: 100%;
  }

  /* Cabecera */
  .onp-typo-row--th > div {
    display: none;
  }

  /* Mostrar solo:
     1 = Foto (NO)
     2 = Precio (SÍ)
     3 = Habs (SÍ)
     4 = Baños (SÍ)
     9 = Planos (SÍ)
  */

  /* HEADER */
  .onp-typo-row--th > div:nth-child(2),
  .onp-typo-row--th > div:nth-child(3),
  .onp-typo-row--th > div:nth-child(4),
  .onp-typo-row--th > div:nth-child(9) {
    display: block;
  }

  /* FILAS */
  .onp-typo-row > div {
    display: none;
  }

  .onp-typo-row > div:nth-child(2),
  .onp-typo-row > div:nth-child(3),
  .onp-typo-row > div:nth-child(4),
  .onp-typo-row > div:nth-child(9) {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    font-size: 14px;
  }

  /* Precio un poco más destacado */
  .onp-typo-row > div:nth-child(2) {
    font-weight: 700;
  }

  /* Ajuste icono PDF */
  .onp-typo-planos-cell {
    justify-content: center;
  }

}


/* =====================================================
 * FIX GLOBAL MOBILE: evitar scroll horizontal
 * ===================================================== */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ===============================
   Estilos dinámicos (Ajustes)
================================ */

.onp-single{
	color: var(--onp-text-color);
}

.onp-h1,
.onp-h2,
.onp-h3{
	color: var(--onp-title-color);
}

.onp-section,
.onp-summary{
	box-shadow: var(--onp-section-shadow);
	border: var(--onp-section-border);
}

.onp-kpi,
.onp-doc,
.onp-form-card,
.onp-gallery-item{
	box-shadow: var(--onp-item-shadow);
	border: var(--onp-item-border);
}

.onp-icon-item svg,
.onp-share-btn svg{
	fill: var(--onp-icon-color);
}
/* === Estilos avanzados (desde ajustes) === */

.onp-single {
	color: var(--onp-text-color);
}

.onp-section,
.onp-summary {
	box-shadow: var(--onp-section-shadow);
	border: var(--onp-section-border);
	border-radius: var(--onp-radius);
}

.onp-kpi,
.onp-doc,
.onp-form-card,
.onp-gallery-item,
.onp-plan-item {
	box-shadow: var(--onp-item-shadow);
	border: var(--onp-item-border);
	border-radius: var(--onp-radius);
}

.onp-h1,
.onp-h2,
.onp-h3,
.onp-title {
	color: var(--onp-title-color);
}

.onp-hero h1,
.onp-hero-title {
	color: var(--onp-hero-title-color);
}

.onp-icon-item svg,
.onp-share-btn svg {
	fill: var(--onp-icon-color);
}

/* =====================================================
   NUEVO: Estilos controlados por Ajustes (CSS variables)
   ===================================================== */

.onp-container{
  color: var(--onp-text-color, #222);
  font-family: var(--onp-font-text, inherit);
}

.onp-h2,
.onp-form-title,
.onp-cta-title{
  color: var(--onp-title-color, var(--onp-primary));
  font-family: var(--onp-font-title, inherit);
}

.onp-title{
  color: var(--onp-hero-title-color, #fff) !important;
  font-family: var(--onp-font-title, inherit);
}

.onp-icon-item svg{
  color: var(--onp-icon-color, var(--onp-accent));
  fill: currentColor;
  font-family: var(--onp-font-icon, inherit);
}

/* Cajas de sección */
.onp-section,
.onp-summary{
  border-radius: var(--onp-section-radius, 20px) !important;
  box-shadow: var(--onp-section-shadow, 0 12px 40px rgba(0,0,0,.08)) !important;
  border: var(--onp-section-border, 1px solid rgba(0,0,0,.05)) !important;
}

/* Elementos internos */
.onp-kpi,
.onp-video,
.onp-form-card,
.onp-doc,
.onp-gallery-item,
.onp-typo-wrap,
details.onp-faq-item{
  border-radius: var(--onp-item-radius, 16px) !important;
  box-shadow: var(--onp-item-shadow, none) !important;
  border: var(--onp-item-border, none) !important;
}