/* assets/css/publicidad.css
   Landing + formulario + confirmación de Publicidad.
   Paleta: terracota #C15F3C/#A34A2C (misma que el resto del sitio). */

h1,h2,h3,h4{font-family:'Schibsted Grotesk',system-ui,sans-serif;margin:0;line-height:1.06;letter-spacing:-0.02em}

.pub-main { max-width: 1280px; margin: 0 auto; }

.pub-kicker {
	font-family: 'Schibsted Grotesk', system-ui, sans-serif;
	font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
	font-size: 13px; color: #C15F3C; margin-bottom: 16px;
}

.pub-h1 {
	font-family: 'Schibsted Grotesk', system-ui, sans-serif;
	font-size: 54px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin: 0;
}
@media (max-width:600px){.pub-h1{font-size:34px}}
.pub-h1--form { font-size: 34px; margin-top: 18px; }

.pub-hero {
	position: relative; padding: 44px 34px 40px;
	background: linear-gradient(180deg, #FBF3EC 0%, #FAF7F2 100%);
	border-bottom: 1px solid #EDE3D8; overflow: hidden;
}
.pub-hero-inner { position: relative; max-width: 640px; }
.pub-hero-text { font-size: 18px; color: #5E5852; margin: 18px 0 28px; max-width: 620px; }
.pub-hero-actions { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 26px; }

.pub-btn {
	display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
	font-family: 'Figtree', sans-serif; font-size: 15px; font-weight: 700;
	padding: 14px 24px; border-radius: 9px; border: 1px solid transparent;
	text-decoration: none; transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pub-btn--primary { background: #C15F3C; color: #fff; }
.pub-btn--primary:hover { background: #A34A2C; color: #fff; }
.pub-btn--ghost { background: #fff; border-color: #E0D6C9; color: #4A453F; }
.pub-btn--ghost:hover { border-color: #C15F3C; color: #C15F3C; }
.pub-btn--sm { padding: 10px 16px; font-size: 13.5px; width: 100%; justify-content: center; margin-top: 16px; }
.pub-btn--block { width: 100%; justify-content: center; border: none; padding: 15px; font-size: 15.5px; margin-top: 20px; }

.pub-section { padding: 40px 34px; }
.pub-section--form { padding: 36px 34px 56px; max-width: 1100px; margin: 0 auto; }
.pub-section--ok { padding: 36px 34px 56px; max-width: 1100px; margin: 0 auto; }

.pub-card { background: #fff; border: 1px solid #E7DDD1; border-radius: 14px; }

.pub-razones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pub-razon { padding: 24px 26px; }
.pub-razon h3 { font-family: 'Schibsted Grotesk', sans-serif; font-size: 18px; font-weight: 800; margin: 15px 0 0; }
.pub-razon p { font-size: 14.5px; color: #5E5852; margin: 8px 0 0; }

.pub-icon-badge {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 12px; background: #F4E3DA; color: #C15F3C; flex: none;
}

.pub-espacios-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pub-espacios-head h2 { font-family: 'Schibsted Grotesk', sans-serif; font-size: 29px; font-weight: 800; margin: 0; }
.pub-espacios-note { font-size: 14px; color: #9a9089; }
.pub-espacios-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 22px; }

.pub-espacio { overflow: hidden; display: flex; flex-direction: column; border: 1px solid #E7DDD1; }
.pub-espacio--destacado { border: 1.5px solid #E0A43B; }
.pub-espacio-preview {
	height: 172px; padding: 14px; box-sizing: border-box; position: relative; overflow: hidden;
	background: linear-gradient(135deg, #EFE7DD, #E4ECE3); border-bottom: 1px solid #EDE3D8;
}
.pub-espacio--destacado .pub-espacio-preview { background: linear-gradient(135deg, #F4E9D3, #EFE0D4); }
.pub-espacio-preview-label {
	font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #A79E95;
	background: rgba(255,255,255,.72); border: 1px dashed #CFBFAF; border-radius: 8px; padding: 8px 14px;
}

/* -----------------------------------------------------------
   Mini-maqueta ("vista previa") de cada espacio: en vez de una
   caja vacía con solo el texto de medidas, cada tarjeta de
   /publicidad/ ahora dibuja, a escala, dónde cae el anuncio
   dentro de su pantalla real (Inicio, Noticias o Explorar),
   usando las mismas proporciones y posición que ya tiene esa
   pantalla en producción. Piezas reutilizables, no una por
   espacio: líneas = texto, "pv-card" = una ficha/artículo
   genérico, "pv-ad" = el hueco real del anuncio.
   ----------------------------------------------------------- */
.pv-mock { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 6px; }
.pv-row { display: flex; gap: 6px; flex: 1; min-height: 0; }
.pv-line { height: 6px; border-radius: 3px; background: rgba(74,69,63,.16); flex: none; }
.pv-line.w30 { width: 30%; } .pv-line.w40 { width: 40%; } .pv-line.w60 { width: 60%; }
.pv-card { flex: 1; border-radius: 5px; background: rgba(74,69,63,.08); border: 1px solid rgba(74,69,63,.12); }
.pv-ad {
	position: relative; flex: 1; border-radius: 6px; overflow: hidden;
	background: linear-gradient(135deg, #C15F3C, #E0A43B);
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(193,95,60,.55);
}
.pv-ad::after {
	content: 'TU ANUNCIO AQUÍ'; position: absolute; inset: 0; display: flex; align-items: center;
	justify-content: center; text-align: center; padding: 4px; color: #fff; font-size: 8px; font-weight: 800;
	letter-spacing: .06em; text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.pv-ribbon {
	position: absolute; top: 0; left: 0; right: 0; z-index: 1; display: flex; justify-content: space-between;
	background: rgba(30,26,22,.55); color: #fff; font-size: 6.5px; font-weight: 800; letter-spacing: .05em;
	text-transform: uppercase; padding: 3px 6px;
}
.pv-dots { display: flex; gap: 4px; justify-content: center; flex: none; }
.pv-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(74,69,63,.2); }
.pv-dot.on { width: 14px; border-radius: 3px; background: #C15F3C; }
.pub-espacio-body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.pub-espacio-titlerow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pub-espacio-titlerow h3 { font-family: 'Schibsted Grotesk', sans-serif; font-size: 19px; font-weight: 800; margin: 0; }
.pub-espacio-body p { font-size: 14.5px; color: #5E5852; margin: 9px 0 0; }
.pub-badge-gold {
	background: #F4E9D3; color: #8A6316; font-size: 11px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .06em; padding: 5px 10px; border-radius: 999px;
}
.pub-espacio-price {
	font-family: 'Schibsted Grotesk', sans-serif; font-weight: 800; font-size: 22px; color: #2C2A28;
	margin-top: auto; padding-top: 16px;
}
.pub-espacio-price span { font-family: 'Figtree', sans-serif; font-size: 13px; font-weight: 500; color: #9a9089; }
.pub-espacio-medidas { font-size: 12px; color: #9a9089; margin-top: 6px; }

.pub-como { padding: 34px 36px; }
.pub-como h2 { font-family: 'Schibsted Grotesk', sans-serif; font-size: 26px; font-weight: 800; margin: 0; }
.pub-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 24px; }
.pub-paso { border-top: 2px solid #F0E7DD; padding-top: 16px; }
.pub-paso-n { font-family: 'Schibsted Grotesk', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .1em; color: #C79B86; }
.pub-paso h3 { font-family: 'Schibsted Grotesk', sans-serif; font-size: 17.5px; font-weight: 800; margin-top: 8px; }
.pub-paso p { font-size: 14.5px; color: #5E5852; margin: 8px 0 0; }
.pub-aviso {
	display: flex; align-items: flex-start; gap: 11px; margin-top: 26px;
	background: #FBF3EC; border: 1px solid #EFE2D5; border-radius: 12px; padding: 15px 17px;
	font-size: 14px; color: #6E6862;
}
.pub-aviso svg { flex: none; color: #C15F3C; margin-top: 2px; }

.pub-cta {
	position: relative; overflow: hidden; background: linear-gradient(120deg, #E4ECE3, #EFE0D4);
	border: 1px solid #E0D6C9; border-radius: 16px; padding: 36px 40px;
	display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.pub-cta h2 { font-family: 'Schibsted Grotesk', sans-serif; font-size: 26px; font-weight: 800; margin: 0; }
.pub-cta p { font-size: 15.5px; color: #4A5A48; max-width: 520px; margin: 9px 0 0; }

/* ---- formulario ---- */
.pub-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #6E6862; text-decoration: none; }
.pub-back:hover { color: #C15F3C; }
.pub-form-layout { display: flex; gap: 48px; align-items: flex-start; margin-top: 28px; }
.pub-form { flex: 1; min-width: 0; padding: 30px 32px 34px; box-shadow: 0 18px 44px rgba(90,60,40,.07); }
.pub-form-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #A79E95; margin-top: 4px; }
.pub-form-error {
	background: #FBEAEA; border: 1px solid #E9C6C6; color: #A3403F; font-size: 14px;
	border-radius: 10px; padding: 13px 16px; margin: 18px 0;
}

.pub-field { margin-top: 14px; }
.pub-field label { display: block; font-size: 13px; font-weight: 700; color: #4A453F; margin-bottom: 7px; }
.pub-optional { font-weight: 500; color: #9a9089; }
.pub-field input[type="text"], .pub-field input[type="email"], .pub-field input[type="tel"],
.pub-field input[type="url"], .pub-field input[type="date"],
.pub-field select, .pub-field textarea {
	width: 100%; font-family: inherit; font-size: 15px; color: #2C2A28; background: #fff;
	border: 1px solid #E0D6C9; border-radius: 10px; padding: 13px 14px; outline: none; box-sizing: border-box;
}
.pub-field input:focus, .pub-field select:focus, .pub-field textarea:focus { border-color: #C15F3C; }
.pub-field textarea { resize: vertical; line-height: 1.6; }
.pub-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }

.pub-divider { height: 1px; background: #F0E7DD; margin: 26px 0 22px; }

.pub-opciones { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.pub-opcion {
	cursor: pointer; display: flex; align-items: flex-start; gap: 12px; border-radius: 12px;
	padding: 14px 16px; border: 1px solid #E0D6C9; background: #fff;
}
.pub-opcion--on { border: 1.5px solid #C15F3C; background: #FBF3EC; }
.pub-opcion:has(input:checked) { border: 1.5px solid #C15F3C; background: #FBF3EC; }
.pub-opcion input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.pub-opcion-radio {
	flex: none; width: 18px; height: 18px; border-radius: 50%; margin-top: 2px;
	border: 1.5px solid #D8C9BC; display: flex; align-items: center; justify-content: center;
}
.pub-opcion--on .pub-opcion-radio, .pub-opcion:has(input:checked) .pub-opcion-radio { border-color: #C15F3C; }
.pub-opcion--on .pub-opcion-radio::after, .pub-opcion:has(input:checked) .pub-opcion-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #C15F3C; display: block; }
.pub-opcion-text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.pub-opcion-nombre { font-size: 14.5px; font-weight: 700; }
.pub-opcion-donde { font-size: 13px; color: #6E6862; margin-top: 2px; }
.pub-opcion-precio { flex: none; font-size: 13.5px; font-weight: 700; color: #8A6316; }

.pub-dropzone {
	display: flex; align-items: center; gap: 13px; border: 1px dashed #E0D6C9; background: #FBF8F3;
	border-radius: 12px; padding: 16px; margin-top: 14px; cursor: pointer;
}
.pub-dropzone:hover { border-color: #C15F3C; background: #FBF3EC; }

/* El <input type="file"> cubre toda la zona, transparente. Así el
   navegador puede anclar ahí su aviso nativo ("Completa este campo")
   y de paso todo el recuadro queda clicable. Con display:none, Chrome
   descarta la validación y no muestra nada. */
.pub-dropzone { position: relative; }
.pub-dropzone-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; font-size: 0;
}
/* Marco rojo cuando falta el archivo. La clase la pone el JS. */
.pub-dropzone.is-error { border-color: #C15F3C; border-style: solid; background: #FDF4F2; }

.pub-drop-error {
  display: flex; align-items: center; gap: 7px;
  margin-top: 9px; font-size: 13px; font-weight: 600; color: #B03A24;
}
.pub-drop-error[hidden] { display: none; }
.pub-drop-error svg { flex: none; }
.pub-dropzone-title { display: block; font-size: 14.5px; font-weight: 700; }
.pub-dropzone-sub { display: block; font-size: 12.5px; color: #6E6862; margin-top: 2px; }

.pub-banner-preview-wrap { margin-top: 12px; background: #FBF8F3; border: 1px solid #E7DDD1; border-radius: 12px; padding: 14px; }
.pub-banner-preview-label { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #A79E95; margin-bottom: 8px; }
.pub-banner-preview-img { display: block; max-width: 100%; max-height: 220px; border-radius: 8px; border: 1px solid #E0D6C9; object-fit: contain; background: #fff; }
.pub-banner-preview-quitar {
	margin-top: 10px; cursor: pointer; background: #fff; border: 1px solid #E0D6C9; color: #A34A2C;
	font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 8px;
}
.pub-banner-preview-quitar:hover { border-color: #C15F3C; }

.pub-banner-medida-aviso { margin-top: 10px; font-size: 13px; font-weight: 600; padding: 10px 14px; border-radius: 10px; }
.pub-banner-medida-aviso--ok { background: #E4EEE7; color: #2F7D57; }
.pub-banner-medida-aviso--error { background: #FBEAEA; color: #A3403F; }

/* ---- editor de plantilla del slide (solo Carrusel destacado) ---- */
/* La vista previa "Así se verá" ya NO vive aquí junto a los campos —
   se movió al sidebar (pub-aside, #pub-slide-preview-card) para que
   quede visible en vivo mientras se llena el formulario (pedido de
   Wilson, 2026-08-19). Ver page-publicidad.php.

   El tamaño 302×392px NO es arbitrario: es el tamaño real y exacto
   de .hero-photo en front-page.php (el slot real del carrusel del
   Inicio donde termina apareciendo este anuncio) — así la vista
   previa muestra literalmente cómo se va a ver, 1:1, no una
   aproximación (pedido de Keury, 2026-08-19). Si .hero-photo cambia
   de tamaño en el futuro, actualizar también aquí. */
.pub-slide-preview-wrap { width: 302px; margin: 14px auto 0; }
.pub-slide-preview {
	position: relative; width: 302px; height: 392px; border-radius: 22px; overflow: hidden;
	background: linear-gradient(150deg, #F4E3DA, #E4ECE3); box-shadow: 0 24px 50px rgba(90,60,40,.22);
}
.pub-slide-preview-img { position: absolute; inset: 0; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
.pub-slide-preview-badge {
	position: absolute; top: 10px; left: 10px; background: #8A7C6B; color: #fff; font-size: 9.5px; font-weight: 800;
	padding: 5px 9px; border-radius: 999px;
}
.pub-slide-preview-panel {
	position: absolute; left: 8px; right: 8px; bottom: 8px; background: rgba(255,255,255,.85); backdrop-filter: blur(6px);
	border-radius: 10px; padding: 10px 12px;
}
.pub-slide-preview-titulo { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 800; font-size: 13px; line-height: 1.2; color: #2C2A28; min-height: 1px; }
.pub-slide-preview-boton {
	margin-top: 8px; text-align: center; background: #C15F3C; color: #fff; font-size: 11.5px; font-weight: 700;
	padding: 7px; border-radius: 6px;
}

.pub-checkline { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 13.5px; color: #4A453F; cursor: pointer; }
.pub-checkline input { width: 17px; height: 17px; accent-color: #C15F3C; margin-top: 1px; flex: none; }
.pub-checkline--legal { font-size: 13px; margin-top: 18px; }
.pub-checkline a { color: #C15F3C; font-weight: 700; }

.pub-form-note { font-size: 12.5px; color: #9a9089; text-align: center; margin-top: 11px; }

.pub-aside { width: 360px; flex: none; position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }
.pub-aside .pub-card { padding: 22px 24px; }
.pub-aside h3 { font-family: 'Schibsted Grotesk', sans-serif; font-size: 17px; font-weight: 800; margin: 0; }
.pub-aside p { font-size: 13.5px; color: #6E6862; margin: 8px 0 0; }
.pub-despues { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.pub-despues-item { display: flex; gap: 12px; font-size: 13.5px; color: #4A453F; }
.pub-despues-n {
	flex: none; width: 26px; height: 26px; border-radius: 50%; background: #F4E3DA; color: #C15F3C;
	font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.pub-inline-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: #C15F3C; text-decoration: none; margin-top: 11px; }

/* ---- confirmación ---- */
.pub-ok { max-width: 640px; margin: 40px auto 0; padding: 40px 42px 44px; text-align: center; box-shadow: 0 30px 70px rgba(60,40,30,.1); }
.pub-ok-icon {
	display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
	border-radius: 16px; background: #E4EEE7; color: #2F7D57;
}
.pub-ok h1 { font-family: 'Schibsted Grotesk', sans-serif; font-size: 30px; font-weight: 800; margin-top: 20px; }
.pub-ok p { font-size: 16.5px; color: #5E5852; margin: 12px auto 0; max-width: 460px; }
.pub-resumen { text-align: left; background: #FBF3EC; border: 1px solid #EFE2D5; border-radius: 12px; padding: 18px 20px; margin-top: 26px; }
.pub-resumen-label { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #A79E95; }
.pub-resumen-row { display: flex; justify-content: space-between; gap: 14px; margin-top: 9px; font-size: 14px; color: #6E6862; }
.pub-resumen-row b { color: #2C2A28; text-align: right; }
.pub-resumen-pendiente { color: #A34A2C !important; }
.pub-ok-note { font-size: 13.5px; color: #9a9089; margin: 18px 0 0; }
.pub-ok-actions { display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

@media (max-width: 1024px) {
	.pub-form-layout { flex-direction: column; }
	.pub-aside { position: static; width: 100%; }
	.pub-espacios-grid { grid-template-columns: 1fr; }
	.pub-razones, .pub-pasos { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.pub-h1 { font-size: 32px; }
	.pub-hero { padding: 34px 18px 30px; }
	.pub-section { padding: 30px 18px; }
	.pub-section--form, .pub-section--ok { padding: 24px 18px 40px; }
	.pub-field-row { grid-template-columns: 1fr; }
}


/* -----------------------------------------------------------
   Selector de FORMATO del slide del carrusel del Inicio
   (anuncio libre / evento / libro / convocatoria).
   Rejilla de 2 columnas en escritorio, 1 en móvil. Mismo lenguaje
   visual que .pub-opcion, solo que más compacto porque son 4 y ya
   vienen debajo de otra lista de opciones.
   ----------------------------------------------------------- */
.pub-formatos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.pub-formato {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  border: 1px solid #E0D6C9; border-radius: 10px; padding: 12px 14px;
  cursor: pointer; background: #fff;
}
.pub-formato--on, .pub-formato:has(input:checked) { border: 1.5px solid #C15F3C; background: #FBF3EC; }
.pub-formato input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.pub-formato-nombre { font-size: 14px; font-weight: 700; color: #2C2A28; }
.pub-formato-donde { font-size: 12.5px; color: #6E6862; line-height: 1.45; }
@media (max-width: 700px) {
  .pub-formatos { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------
   Vista previa en vivo: piezas nuevas de los formatos
   (etiqueta pequeña, descripción, fecha/lugar y el panel
   ilustrado de Convocatoria). Escala reducida respecto al slide
   real (302×392), por eso las tipografías son más chicas.
   ----------------------------------------------------------- */
.pub-slide-preview-overline {
  font-size: 8px; font-weight: 700; color: #A34A2C;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px;
}
.pub-slide-preview-texto { font-size: 9.5px; color: #6E6862; line-height: 1.4; margin-top: 3px; }
.pub-slide-preview-metas { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.pub-slide-preview-meta { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; color: #6E6862; }
.pub-slide-preview-meta svg { flex: none; }

/* El contenedor va SIN fondo: así el icono y la pastilla se ven
   encima de la imagen subida, igual que en el slide real. El fondo
   ilustrado solo aparece cuando no hay imagen (.is-ilustrado, lo
   pone publicidad.js). */
.pub-slide-preview-conv {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; padding: 0 16px;
  background: transparent; pointer-events: none;
}
.pub-slide-preview-conv.is-ilustrado { background: linear-gradient(150deg, #FBF3EC, #E4ECE3); }
.pub-slide-preview-conv-ic {
  width: 56px; height: 56px; border-radius: 50%; background: #fff; color: #C15F3C;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px rgba(90,60,40,.16);
}
.pub-slide-preview-pill {
  background: #fff; color: #2C2A28;
  font-family: 'Schibsted Grotesk', sans-serif; font-weight: 800; font-size: 13px;
  text-align: center; padding: 6px 12px; border-radius: 999px;
  box-shadow: 0 6px 14px rgba(90,60,40,.12);
}

/* -----------------------------------------------------------
   Adaptación de la pieza gráfica al contenedor.
   Ya no se exige una medida exacta al subir, así que el CSS tiene
   que absorber cualquier proporción sin deformar nada.
   'cover' llena el hueco y recorta lo que sobra; nunca estira la
   imagen, que es lo que se ve barato.
   ----------------------------------------------------------- */
.pub-banner img,
.ad-banner img,
.banner-anuncio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}


/* ---------------------------------------------------------------
   Vista previa del slide del carrusel: visible sin hacer scroll.

   EL PROBLEMA: la columna lateral ya era sticky, pero la vista
   previa era la SEGUNDA tarjeta, debajo de "Qué pasa después".
   Eso la empujaba fuera de la pantalla justo mientras el
   anunciante rellenaba los campos que la modifican, que es el
   único momento en que sirve de algo.

   En escritorio se sube al primer lugar de la columna con order,
   sin tocar el HTML. Al ser la columna sticky y la vista previa su
   primer elemento, queda pegada arriba mientras se escribe.

   En móvil la columna cae debajo del formulario, así que la vista
   previa quedaba al final de la página. Se sube encima del
   formulario, PERO solo cuando el editor del carrusel está
   abierto: si el anunciante eligió un banner normal no hay nada
   que previsualizar y no tiene sentido alejarle el formulario.
   assets/js/publicidad.js pone display:block en esa tarjeta al
   activar el carrusel, y :has() lee ese estado.
   --------------------------------------------------------------- */
.pub-aside #pub-slide-preview-card { order: -1; }

@media (max-width: 1024px) {
	.pub-form-layout:has(#pub-slide-preview-card[style*="display: block"]) .pub-aside,
	.pub-form-layout:has(#pub-slide-preview-card[style*="display:block"]) .pub-aside {
		order: -1;
	}
	/* En móvil la tarjeta se queda pegada arriba mientras se
	   rellenan los campos de abajo. */
	.pub-form-layout:has(#pub-slide-preview-card[style*="display: block"]) .pub-aside #pub-slide-preview-card,
	.pub-form-layout:has(#pub-slide-preview-card[style*="display:block"]) .pub-aside #pub-slide-preview-card {
		position: sticky;
		top: 8px;
		z-index: 20;
	}
	/* "Qué pasa después" es informativo y largo: en móvil estorba
	   entre la vista previa y el formulario. Se manda al final. */
	.pub-form-layout:has(#pub-slide-preview-card[style*="display: block"]) .pub-aside .pub-card:not(#pub-slide-preview-card),
	.pub-form-layout:has(#pub-slide-preview-card[style*="display:block"]) .pub-aside .pub-card:not(#pub-slide-preview-card) {
		order: 3;
	}
}

/* El hero salio de .pub-main en page-publicidad.php, asi que su
   fondo llega a los bordes de la ventana. El contenido se topa en
   1280px, el mismo numero que .inicio-main, .prov-hero y .noti-hero,
   para que alinee con el resto de las secciones (igual que Inicio). */
.pub-hero{padding-left:28px;padding-right:28px}
.pub-hero .hero-row-carrusel{max-width:1280px;margin:0 auto}
@media (max-width:1024px){.pub-hero{padding-left:22px;padding-right:22px}}
@media (max-width:600px){.pub-hero{padding-left:16px;padding-right:16px}}

/* =========================================================
   Vista previa del slide = carrusel del Inicio (oct 2026).
   Igual que en hero-formatos.css: la tarjeta conserva su forma
   302×392 y el panel va DEBAJO, montado 28px sobre el borde, sin
   tapar la pieza. En "Anuncio" la pieza se muestra completa
   (contain) y se encoge esos 28px, como en el sitio real.
   ========================================================= */
.pub-slide-preview-wrap { width: auto; max-width: 412px; }
.pub-slide-preview {
	width: 100%; height: auto; overflow: visible; border-radius: 0; background: none; box-shadow: none;
	display: flex; flex-direction: column; align-items: center;
}
.pub-slide-preview-img {
	position: relative; inset: auto; flex: none; width: 302px; height: 392px; border-radius: 22px; overflow: hidden;
	background-color: #F4E3DA; box-shadow: 0 14px 34px rgba(90,60,40,.18); box-sizing: border-box;
}
.pub-slide-preview-conv { inset: auto; top: 0; left: 50%; width: 302px; height: 392px; transform: translateX(-50%); border-radius: 22px; }
.pub-slide-preview-badge { left: calc(50% - 141px); z-index: 2; }
.pub-slide-preview-panel {
	position: relative; left: auto; right: auto; bottom: auto; width: 100%; box-sizing: border-box;
	margin-top: -28px; z-index: 1; background: rgba(255,255,255,.92); box-shadow: 0 16px 38px rgba(90,60,40,.16);
}
.pub-slide-preview--anuncio .pub-slide-preview-img {
	background-size: contain; background-origin: content-box; padding-bottom: 28px; background-color: #F6F1EA;
}