/* === assets/fonts/af-fonts.css === */
/* af: sustitución local de fuentes — ver PLAN.md Fase 1.2 */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Onest-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Onest-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Onest-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Copse";
  src: url("../fonts/Copse-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Damion";
  src: url("../fonts/Damion-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Italianate";
  src: url("../fonts/Italianate-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Dosis";
  src: url("../fonts/Dosis-Regular.ttf") format("truetype");
  font-weight: 100 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Dosis";
  src: url("../fonts/Dosis-Bold.ttf") format("truetype");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}
/* Familia con su nombre real (los CSS del sitio ahora piden "Onest");
   las @font-face "Montserrat" de arriba quedan como alias por si el JS
   del builder asigna esa familia dinámicamente. */
@font-face { font-family: "Onest"; src: url("../fonts/Onest-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Onest"; src: url("../fonts/Onest-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Onest"; src: url("../fonts/Onest-Bold.ttf") format("truetype"); font-weight: bold; font-style: normal; font-display: swap; }

/* Algunos títulos antiguos quedaron con "Ubuntu Mono" (fuente de Google no
   internalizada) en el CSS específico de esas páginas. En vez de editar
   decenas de archivos static_style-*.css, se registra "Ubuntu Mono" como
   alias que carga Dosis — cualquier elemento que la pida recibe Dosis. */
@font-face { font-family: "Ubuntu Mono"; src: url("../fonts/Dosis-Regular.ttf") format("truetype"); font-weight: 100 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Ubuntu Mono"; src: url("../fonts/Dosis-Bold.ttf") format("truetype"); font-weight: 600 900; font-style: normal; font-display: swap; }

/* "freight-sans-pro" es una fuente de Adobe Typekit del diseño original que nunca se
   internalizó: aparece en 13 reglas de casi todas las páginas y, al no existir, ese
   texto caía en la tipografía por defecto del sistema (distinta en cada equipo).
   Se registra como alias de Onest, igual que se hizo con Montserrat y Ubuntu Mono. */
@font-face { font-family: "freight-sans-pro"; src: url("../fonts/Onest-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "freight-sans-pro"; src: url("../fonts/Onest-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "freight-sans-pro"; src: url("../fonts/Onest-Bold.ttf") format("truetype"); font-weight: 600 900; font-style: normal; font-display: swap; }


/* === assets/css/af-custom.css === */
/* ============================================================
   af-custom.css — Estilos propios de Ars Focus (globales)
   Se carga en TODAS las páginas después del CSS original del
   diseño, así que cualquier regla aquí lo sobreescribe.
   Editable desde el panel: Admin → Cabecera/Pie → Estilos globales.
   ============================================================ */

/* ── Página 404 (404.html) ─────────────────────────────────────────────────────── */
.af-404{min-height:70vh;display:flex;align-items:center;justify-content:center;
	background:#fff;font-family:"Onest",sans-serif;padding:60px 20px}
.af-404-inner{max-width:520px;text-align:center}
.af-404-camara{width:180px;height:auto;margin:0 auto 8px;animation:af-404-flotar 3.2s ease-in-out infinite}
.af-404-sombra{fill:#000;opacity:.12;animation:af-404-sombra 3.2s ease-in-out infinite}
.af-404-flash{opacity:0;animation:af-404-flash 3.2s ease-in-out infinite}
.af-404-brillo{opacity:.5}
@keyframes af-404-flotar{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}
@keyframes af-404-sombra{0%,100%{transform:scale(1);opacity:.12}50%{transform:scale(.85);opacity:.07}}
@keyframes af-404-flash{0%,18%,100%{opacity:0}20%,24%{opacity:1}26%{opacity:0}}
.af-404-titulo{font-family:"Copse",serif;font-size:64px;color:#333131;margin:0 0 6px;line-height:1}
.af-404-texto{color:#777;font-size:16px;margin:0 0 28px;line-height:1.5}
.af-404-buscador{margin-bottom:20px}
.af-404-acciones{margin-top:4px}
@media(prefers-reduced-motion:reduce){
	.af-404-camara,.af-404-sombra,.af-404-flash{animation:none}
}

/* ── Barra de búsqueda del encabezado (fragments/header.html) ───────────────────
   Es el último <li> del propio <ul class="preview-links-wrapper">, un ítem de
   menú más — no un hermano flotante fuera del <ul>. Motivo: el motor del
   builder mide el ancho de .preview-item-links UNA vez, al cargar, para
   decidir si el menú entra completo o colapsa a hamburguesa; si el buscador
   vive DENTRO de ese <ul>, la medición ya lo incluye de forma nativa: si con
   su ancho fijo el menú completo ya no cabe, colapsa entero a hamburguesa
   (igual que si sobrara un link de texto) en vez de superponerse o
   recortarse — nunca queda a medias ni tapando a los demás ítems.
   Ancho fijo siempre, sin estados que se expandan/encojan: cualquier cambio
   de tamaño en caliente lo pelea el flex-shrink del <ul> (comprobado: un
   ancho que crece con :focus-within terminaba encogido por flexbox pase lo
   que declare el CSS). Con tamaño fijo desde el principio no hay nada que
   flexbox tenga que renegociar.
   Para que el buscador entre sin colapsar el menú a hamburguesa en anchos de
   escritorio comunes (~1366px), se quitó el ítem "Cotización" (ya está
   accesible desde /cotizacion y en el pie) y se recorta el padding lateral
   de cada ítem del menú (regla ".preview-item-links span" más abajo — el
   original, fijado en un <style> por página con selectores tipo
   ".style-XXXX .style-YYYY .preview-item-links span", usaba 8px 10px).
   El <ul> NO es flexbox en modo escritorio (solo se vuelve flex-column con
   [data-shrink-style='vertically'] al colapsar a hamburguesa) — en modo fila
   es flujo inline normal con los <li> como inline-block, alineados por
   vertical-align. Como los <li> de texto no fijan vertical-align (usan el
   valor por defecto, baseline) y el buscador si tenía vertical-align:middle,
   quedaban en líneas base distintas y se veía más abajo. Se iguala TODO el
   renglón a vertical-align:middle para que el buscador y los links compartan
   la misma referencia vertical. */
.preview-item-links > ul.preview-links-wrapper > li{vertical-align:middle}
/* El recorte a 8px 6px es SOLO para el menú del header (para que entre el
   buscador sin colapsar a hamburguesa, ver nota arriba). Los botones de
   contenido (VER de las publicaciones, Ir al Blog, etc.) comparten la misma
   clase .item-link pero viven fuera de .header-box — reciben más padding
   lateral para verse rectangulares con aire, no como el menú compacto. */
.header-box .preview-item-links span.item-link{padding:8px 6px!important}
.preview-item-links span.item-link{padding:12px 30px!important}
.af-nav-search-item{vertical-align:middle;margin-left:12px}
.af-nav-search{display:inline-flex;align-items:center;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15);
	border-radius:999px;padding:0 4px 0 14px;width:150px;height:32px;box-sizing:border-box;vertical-align:middle}
.af-nav-search-input{border:none;background:none;outline:none;color:#333131;font-family:"Onest",sans-serif;
	font-size:13px!important;line-height:1.4;flex:1;min-width:0;padding:6px 0}
.af-nav-search-input::placeholder{color:#999}
.af-nav-search-btn{border:none;background:none;color:#333131;cursor:pointer;flex-shrink:0;
	width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.af-nav-search-btn:hover{color:#EF9809}
/* En móvil el motor del builder colapsa el menú a hamburguesa por su cuenta
   (mide el ancho real al cargar, no depende de nuestro CSS) y en algunos
   casos deja el buscador visible en la barra, junto a la hamburguesa, en
   vez de esconderlo con el resto de los links hasta que se abre el menú.
   Para garantizarlo pase lo que pase (aunque el motor le ponga un estilo
   en línea), se oculta con !important por defecto en anchos de móvil y solo
   se muestra cuando el menú está realmente abierto (.header-box.menu-open,
   la clase que el propio motor agrega al hacer clic en la hamburguesa) —
   así queda DENTRO del desplegable, como un ítem más de la lista, nunca
   afuera junto al ícono. */
@media(max-width:900px){
	.af-nav-search-item{display:none!important}
	.header-box.menu-open .af-nav-search-item{display:block!important;width:150px;margin:14px auto 0!important}
}
/* Con el menú móvil abierto, el motor pone pointer-events:none a TODO el
   contenedor .preview-item-links y solo lo reactiva en los links de texto
   (.preview-element.Link.item-link). El buscador no es un link de texto, así
   que heredaba ese none y no dejaba clickear ni escribir. Se le reactivan los
   eventos explícitamente a él y a sus hijos (input/botón). */
.af-nav-search-item,.af-nav-search,.af-nav-search-input,.af-nav-search-btn{pointer-events:auto}

/* ── Página /buscador (buscador/index.html) ────────────────────────────────────── */
.af-buscador{max-width:900px;margin:0 auto;padding:0 16px}
.af-buscador-form{display:flex;gap:10px;margin:0 0 28px}
.af-buscador-input{flex:1;padding:14px 20px;border:1.5px solid #ddd;border-radius:999px;
	background:#fff;color:#333131!important;
	font-family:"Onest",sans-serif;font-size:16px!important;line-height:1.4;outline:none;transition:border-color .15s ease}
.af-buscador-input::placeholder{color:#999}
.af-buscador-input:focus{border-color:#EF9809}
.af-buscador-boton{padding:0 28px;border:none;border-radius:999px;background:#EF9809;color:#fff!important;
	font-family:"Onest",sans-serif;font-size:16px!important;font-weight:600;cursor:pointer;transition:background .15s ease}
.af-buscador-boton:hover{background:#d98600}
.af-buscador-estado{color:#fff;font-family:"Onest",sans-serif;font-size:14px;margin:0 0 20px}
.af-buscador-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.af-buscador-card{display:flex;flex-direction:column;text-decoration:none;color:#333131;
	border-radius:12px;overflow:hidden;background:#f8f6f3;box-shadow:0 2px 10px rgba(0,0,0,.06);
	transition:transform .18s ease,box-shadow .18s ease}
.af-buscador-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.12)}
.af-buscador-card-img{aspect-ratio:4/3;background:#eee;overflow:hidden}
.af-buscador-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.af-buscador-card-sinimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:32px;opacity:.35}
.af-buscador-card-texto{padding:16px 18px}
.af-buscador-card-badge{display:block;font-family:"Copse",serif;font-size:10px;letter-spacing:.06em;line-height:1.6;
	text-transform:uppercase;color:#EF9809;margin-bottom:6px}
.af-buscador-card-texto h3{font-family:"Onest",sans-serif;font-size:15px;font-weight:600;margin:0 0 6px;line-height:1.3}
.af-buscador-card-texto p{font-family:"Onest",sans-serif;font-size:13px;color:#777;margin:0;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.af-buscador-sinresultados{text-align:center;padding:32px 16px;color:#fff;font-family:"Onest",sans-serif;font-size:16px}
.af-buscador-sinresultados p{margin:0 0 8px}
.af-buscador-acciones{display:flex;gap:12px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.af-buscador-btn{padding:11px 22px;border-radius:999px;text-decoration:none;font-family:"Onest",sans-serif;
	font-weight:600;font-size:14px!important;line-height:1.4;border:1.5px solid #ddd;color:#333!important;background:#fff;cursor:pointer;transition:background .15s ease}
.af-buscador-btn:hover{background:#f4f2ef}
.af-buscador-btn-primary{background:#EF9809;border-color:#EF9809;color:#fff}
.af-buscador-btn-primary:hover{background:#d98600}
@media(max-width:640px){
	.af-buscador-form{flex-direction:column}
	.af-buscador-boton{padding:12px}
}

/* ── Pie de página rediseñado (fragments/footer.html) ────────────── */
.af-footer{background:#AA0000;color:#fff;padding:56px 24px 40px;font-family:"Onest","Helvetica Neue",Arial,sans-serif}
.af-footer a{color:#fff;text-decoration:none}
.af-footer a:hover{opacity:.85;text-decoration:none}
.af-footer-inner{
	max-width:1100px;margin:0 auto;
	display:grid;
	grid-template-columns:auto repeat(3, 1fr);
	grid-template-areas:"logo col1 col2 col3";
	align-items:start;
	column-gap:56px;row-gap:32px;
}
.af-footer-logo{grid-area:logo;align-self:start}
.af-footer-logo img{width:180px;max-width:40vw;height:auto;filter:brightness(0) invert(1)}
.af-footer-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.af-footer-col:nth-of-type(1){grid-area:col1}
.af-footer-col:nth-of-type(2){grid-area:col2}
.af-footer-col:nth-of-type(3){grid-area:col3}
.af-footer-col h3{font-family:"Onest",sans-serif;font-style:italic;font-weight:600;font-size:22px;color:#e8dcdc;margin:0 0 10px}
.af-footer-col a{font-family:"Copse",serif;font-size:17px;line-height:1.4}
.af-footer-social{display:flex;gap:12px;margin-top:14px}
.af-footer-social img{width:42px;height:42px;border-radius:50%;display:block}
.af-footer-bottom{max-width:1100px;margin:48px auto 0;padding-top:32px;border-top:1px solid rgba(255,255,255,.18);text-align:center}
.af-footer-por{margin:0 0 14px;display:flex;align-items:center;justify-content:center;gap:12px}
.af-footer-por span{font-family:"Damion",cursive;font-size:30px;color:#fff}
.af-footer-por img{height:64px;width:auto;vertical-align:middle}
.af-footer-copy{font-family:"Onest",sans-serif;font-size:15px;color:#fff;margin:0}
@media(max-width:980px){
	.af-footer-inner{
		grid-template-columns:repeat(3, 1fr);
		grid-template-areas:
			"logo logo logo"
			"col1 col2 col3";
		justify-items:center;
		text-align:center;
		column-gap:28px;row-gap:36px;
	}
	.af-footer-logo{justify-self:center}
	.af-footer-col{align-items:center}
	.af-footer-social{justify-content:center}
}
@media(max-width:680px){
	.af-footer-inner{
		grid-template-columns:1fr;
		grid-template-areas:
			"logo"
			"col1"
			"col2"
			"col3";
		row-gap:32px;
	}
}

/* ── Banda "Síguenos" (reemplaza Muro/Curator.io) ─────────────────── */
/* el motor del builder envuelve en runtime cada sección "stripe" en un div con
   fondo negro por defecto (visible hasta que se define una imagen/color) — se
   cubre dándole su propio fondo blanco, igual que el resto de secciones planas. */
.af-social-band{background:#fff;width:100%;text-align:center;font-family:"Onest","Helvetica Neue",Arial,sans-serif}
.af-social-band-inner{max-width:900px;margin:0 auto;padding:60px 24px}
.af-social-band h2{font-family:"Onest",sans-serif;font-style:italic;font-weight:600;font-size:32px;color:#333131;margin:0 0 8px}
.af-social-band p{color:#777;font-size:16px;margin:0 0 28px}
/* Galerías masonry (estilo Curator) para Instagram/Facebook: teaser con fotos
   propias del sitio; al hacer clic abre el modal con las publicaciones reales. */
.af-social-galleries{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}
.af-social-gallery{display:block;width:260px;max-width:100%;text-decoration:none;border-radius:12px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.1);transition:transform .2s ease,box-shadow .2s ease;background:#f4f2ef}
.af-social-gallery:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(0,0,0,.16)}
.af-social-gallery-masonry{column-count:2;column-gap:4px;padding:4px 4px 0}
.af-social-gallery-masonry img{width:100%;display:block;margin-bottom:4px;border-radius:4px;break-inside:avoid;object-fit:cover}
.af-social-gallery-masonry img:nth-child(1){aspect-ratio:1/1.3}
.af-social-gallery-masonry img:nth-child(2){aspect-ratio:1/0.85}
.af-social-gallery-masonry img:nth-child(3){aspect-ratio:1/0.85}
.af-social-gallery-masonry img:nth-child(4){aspect-ratio:1/1.3}
.af-social-gallery-label{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;font-family:"Copse",serif;font-size:16px;color:#333131}
.af-social-gallery-label img{width:28px;height:28px;border-radius:50%;object-fit:cover}

.af-social-band-icons{display:flex;justify-content:center;gap:36px;flex-wrap:wrap}
.af-social-band-icons a{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:#333131}
.af-social-band-icons img{width:40px;height:40px;border-radius:50%;object-fit:cover;transition:transform .2s ease}
.af-social-band-icons a:hover img{transform:scale(1.08)}
.af-social-band-icons span{font-family:"Copse",serif;font-size:13px}

/* ── Tipografía unificada de publicaciones ─────────────────────────────────────
   Normaliza las publicaciones antiguas al formato de las recientes. Scoped con
   body:has(.af-post-nav): el navegador Anterior/Próximo solo existe en
   publicaciones, así las secciones del sitio no se ven afectadas. */
body:has(.af-post-nav) .preview-body,
body:has(.af-post-nav) .preview-body p{
	font-family:"Onest","Helvetica Neue",Arial,sans-serif!important;
	font-size:16px!important;line-height:1.6em!important}
/* títulos de sección dentro de bloques de texto ("Sobre la fotografía...", etc.):
   en las antiguas venían en peso normal; las recientes los usan en negrita */
body:has(.af-post-nav) .text_block-wrapper h2.preview-title{font-weight:700!important}

/* ── Inserciones por publicación (Instagram / Google Maps, vía panel) ────────── */
.af-embed{max-width:900px;margin:0 auto;padding:0 24px 40px;text-align:center;display:flex;flex-direction:column;gap:32px;align-items:center}
.af-embed iframe{max-width:100%;border:0}

/* ── Lightbox rediseñado ────────────────────────────────────────────────────────
   Fondo dinámico (og:image de la página vía --af-lb-fondo, la pone af-lightbox.js)
   desenfocado y en blanco y negro + degradé de marca superpuesto. La imagen va
   centrada con sombra; el texto, debajo y centrado; flechas = chevrones SVG.
   !important: af-deferred.css (con el lightbox.css original) carga después. */
.light-box-wrapper{background:#1e1c1c!important;overflow:hidden;
	animation:af-lb-entrada .3s ease;transition:opacity .22s ease}
@keyframes af-lb-entrada{from{opacity:0}to{opacity:1}}
.light-box-wrapper.af-lb-cerrando{opacity:0}
/* centrado por flex, robusto ante el display del wrapper (jQuery .show() puede
   dejarlo en block en vez del display:table original) */
.light-box-image-holder{display:flex!important;flex-direction:column;
	align-items:center;justify-content:center;width:100%;height:100vh}
.light-box-wrapper::before{content:"";position:absolute;inset:-40px;z-index:-2;
	background-image:var(--af-lb-fondo);background-size:cover;background-position:center;
	filter:blur(26px) grayscale(1)}
.light-box-wrapper::after{content:"";position:absolute;inset:0;z-index:-1;
	background:linear-gradient(135deg,rgba(239,152,9,.50),rgba(170,0,0,.55))}
.light-box-image{margin-top:0!important;border-radius:10px;
	background-size:cover!important;
	box-shadow:0 18px 48px rgba(0,0,0,.45),0 4px 14px rgba(0,0,0,.35);
	transition:width .2s ease,height .2s ease,opacity .25s ease}
/* la caja (y su sombra) se revela recién cuando la foto terminó de cargar (af-lightbox.js) */
.light-box-image.af-lb-cargando{opacity:0}
/* texto justo debajo de la imagen, centrado, sin barra negra */
.lightbox-text-wrapper{position:static!important;display:block!important;width:auto!important;margin-top:16px}
.lightbox-text-holder{display:block!important;background:none!important;padding:0!important}
.lightbox-title{max-width:min(80vw,700px)!important;margin:0 auto!important;font-size:16px;color:#fff;
	text-align:center!important;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.lightbox-subtitle{max-width:min(80vw,700px)!important;margin:2px auto 0!important;font-size:16px!important;
	text-align:center!important;color:rgba(255,255,255,.8)!important;text-shadow:0 1px 6px rgba(0,0,0,.5)}
/* chevrones y cierre (los SVG los pone af-lightbox.js) */
.light-box-wrapper .lightbox-arrow{width:46px;height:46px;margin-top:-23px!important;
	opacity:.8;transition:opacity .15s ease,transform .15s ease;
	filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.light-box-wrapper .lightbox-arrow:hover{opacity:1;transform:scale(1.08)}
.light-box-wrapper .lightbox-left{left:18px!important}
.light-box-wrapper .lightbox-right{right:18px!important}
.close-lightbox-btn{top:16px!important;right:16px!important;width:34px!important;height:34px!important;
	filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
@media(max-width:640px){
	.light-box-wrapper .lightbox-arrow{width:36px;height:36px;margin-top:-18px!important}
	.light-box-wrapper .lightbox-left{left:6px!important}
	.light-box-wrapper .lightbox-right{right:6px!important}
	.lightbox-title{font-size:14px}
}

/* ── Navegador Anterior/Próximo (reemplaza "Siguientes Proyectos" del builder) ── */
.af-post-nav{background:#fff;width:100%;font-family:"Onest","Helvetica Neue",Arial,sans-serif}
.af-post-nav-inner{max-width:1100px;margin:0 auto;padding:32px 24px 56px;display:flex;gap:20px}
.af-post-nav-link{flex:1 1 0;display:flex;align-items:center;gap:14px;padding:20px 22px;border-radius:12px;
	background:#f4f2ef;text-decoration:none;color:#333131;min-width:0;transition:background .2s ease,transform .2s ease}
.af-post-nav-link:hover{background:#ece7df;transform:translateY(-2px)}
.af-post-nav-proximo{justify-content:flex-end;text-align:right}
.af-post-nav-chevron{flex-shrink:0;color:#EF9809;display:flex}
.af-post-nav-texto{display:flex;flex-direction:column;gap:3px;min-width:0}
.af-post-nav-proximo .af-post-nav-texto{align-items:flex-end}
.af-post-nav-label{font-family:"Copse",serif;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:#999}
.af-post-nav-titulo{font-family:"Onest",sans-serif;font-weight:600;font-size:16px;color:#333131;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media(max-width:640px){
	.af-post-nav-inner{flex-direction:column;padding:24px 20px 40px}
	.af-post-nav-titulo{max-width:70vw}
}

/* ── Modal "Síguenos" (Instagram/Facebook reales al hacer clic) ───── */
.af-social-band-icons a[data-af-social]{cursor:pointer}
.af-social-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center}
.af-social-modal[hidden]{display:none}
.af-social-modal-backdrop{position:absolute;inset:0;background:rgba(30,28,28,.7)}
.af-social-modal-box{position:relative;background:#fff;border-radius:14px;max-width:560px;width:92vw;max-height:85vh;overflow:auto;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.af-social-modal-box h3{font-family:"Onest",sans-serif;font-style:italic;font-weight:600;font-size:24px;color:#333131;margin:0 0 16px}
.af-social-modal-close{position:absolute;top:12px;right:16px;background:none;border:none;font-size:28px;line-height:1;color:#999;cursor:pointer;padding:4px 8px}
.af-social-modal-close:hover{color:#333131}
.af-social-modal-body{display:flex;flex-direction:column;gap:20px;align-items:center;min-height:120px}
.af-social-modal-vacio{color:#777;font-family:"Onest",sans-serif;text-align:center;padding:20px 0}

/* ── Botón "Volver arriba" (xprs-back-to-top-button, inyectado por el
   builder en un <style>/<script> propio al final de cada página) ───────────
   El original es un cuadrado gris (#ccc, border-radius:5px) con una flecha
   ⇧ tenue — se rediseña como círculo con el naranja de marca. El JS que
   calcula la duración del scroll (duration = startPosition / 4, ya reducido
   de /2 en las 19 páginas que traen el botón) no se puede tocar desde CSS;
   solo el aspecto visual. !important porque el <style> inyectado por página
   aparece después en el documento y ganaría por orden de cascada si no. */
button.xprs-back-to-top-button{
	background:#EF9809!important;
	border-radius:50%!important;
	box-shadow:0 4px 14px rgba(0,0,0,.28)!important;
	transition:opacity .3s ease-in-out, transform .2s ease, background .2s ease!important;
}
button.xprs-back-to-top-button:hover{
	background:#d98700!important;
	transform:scale(1.08);
}
/* La flecha es el SVG de la marca (assets/logos/af-flecha-arriba.svg) embebido como
   data URI: se dibuja igual en todos los sistemas —el emoji ⬆ que traía cambiaba de
   forma según el equipo— y no agrega una petición extra. */
button.xprs-back-to-top-button.black text:before,
button.xprs-back-to-top-button.white text:before{
	content:""!important;
	display:block!important;
	width:100%!important;
	height:100%!important;
	background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20500'%20fill='%23fff'%3E%3Cpolygon%20points='396.19%20195.09%20317.23%20195.09%20317.23%20344.36%20181.53%20344.36%20181.53%20195.09%20103.81%20195.09%20250%2037.21%20396.19%20195.09'/%3E%3Crect%20x='181.53'%20y='364.1'%20width='135.7'%20height='39.48'/%3E%3Crect%20x='181.53'%20y='423.32'%20width='135.7'%20height='39.48'/%3E%3C/svg%3E")!important;
	background-repeat:no-repeat!important;
	background-position:center!important;
	background-size:48%!important;
}

@media (min-width:787px){
	button.xprs-back-to-top-button{
		height:56px!important;
		width:56px!important;
		font-size:28px!important;
		line-height:56px!important;
		bottom:20px!important;
		right:20px!important;
	}
}

/* ── Página /envio-de-imagenes (formulario propio, sin backend externo) ───── */
/* La página se clonó de /buscador (mismo truco que 404.html) para heredar
   header/footer, pero el módulo TEXT_BLOCK de título/foto decorativo del
   builder (gallery-box, magic-circle-holder, etc.) se ELIMINÓ por completo
   del HTML de esta página en vez de ocultarlo con CSS — un intento anterior
   de neutralizarlo con display:none / height:0 rompía el motor JS del
   builder (mide esa caja al cargar) y a veces tumbaba toda la página. Con
   el módulo removido del todo no hay nada que el JS pueda romper. Mismo
   vbid que /buscador (mismo origen del clon) — por eso cualquier regla acá
   NUNCA debe apuntar a ese vbid con un selector global, rompería /buscador. */
/* overflow:hidden evita que el margen inferior de los hijos (ej. el bottom
   margin de .af-envio-seguridad) "colapse" hacia afuera y deje ver el gris
   de fondo de la página del builder justo debajo del blanco. */
.af-envio-wrapper{background:#fff;overflow:hidden}
.af-envio{margin:0 auto;background:#fff}
/* Hero propio (foto + velo rojo #AA0000, como el formulario original en
   marfdisegno.com) — sin el isologo de Ars Focus, porque el header del sitio
   ya lo muestra arriba. "Formulario" en Damion (la fuente cursiva de la
   marca) y el subtítulo en Onest, con poco espacio entre ambas líneas. */
.af-envio-hero{position:relative;min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;
	text-align:center;padding:50px 20px;background:
	linear-gradient(rgba(170,0,0,.64),rgba(170,0,0,.64)),
	url(/assets/photos/2RDZpaEwQ425DuEq0wjz7bdlsITH4vjyzi9u3FOu.jpg) center/cover;margin-bottom:36px}
.af-envio-hero h2{font-family:"Damion",cursive;font-weight:400;font-size:52px;color:#fff;margin:0;line-height:1}
.af-envio-hero h3{font-family:"Onest",sans-serif;font-weight:300;font-size:26px;color:#fff;margin:2px 0 0}
.af-envio-cuerpo{max-width:640px;margin:0 auto;padding:0 20px 50px}
.af-envio-intro{font-family:"Onest",sans-serif;color:#555;font-size:15px;line-height:1.6;margin:0 0 28px;text-align:left}
.af-envio-mensaje{border-radius:12px;padding:16px 18px;font-family:"Onest",sans-serif;font-size:14px;margin-bottom:20px;line-height:1.5;text-align:left}
.af-envio-mensaje.ok{background:#e8f5e9;color:#2e7d32}
.af-envio-mensaje.err{background:#ffebee;color:#b71c1c}
.af-envio-form{display:flex;flex-direction:column;gap:22px;text-align:left}
/* Honeypot anti-spam: fuera de pantalla (no display:none/visibility:hidden,
   que los bots más cuidadosos ya detectan) — invisible y no tabulable para
   personas, pero un bot que autocompleta todos los campos del form igual lo
   rellena. Si enviar.php lo recibe con contenido, descarta el envío. */
.af-envio-honeypot{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.af-envio-campo{display:flex;flex-direction:column;gap:8px;text-align:left}
.af-envio-campo label{font-family:"Onest",sans-serif;font-weight:400;font-size:14px;color:#333131;text-align:left}
.af-envio-campo .req{color:#AA0000}
.af-envio-input,.af-envio-select,.af-envio-textarea{font-family:"Onest",sans-serif;font-size:15px;color:#333131!important;
	border:1px solid #ccc;border-radius:6px;padding:11px 14px;outline:none;transition:border-color .15s ease;
	background:#fff;width:100%;box-sizing:border-box;line-height:1.4;text-align:left}
.af-envio-input::placeholder,.af-envio-textarea::placeholder{color:#999}
.af-envio-input:focus,.af-envio-select:focus,.af-envio-textarea:focus{border-color:#EF9809}
.af-envio-textarea{resize:vertical;min-height:100px}
.af-envio-radios{display:flex;flex-wrap:wrap;gap:10px 20px;text-align:left}
.af-envio-radio{display:flex;align-items:center;gap:6px;font-family:"Onest",sans-serif;font-size:14px;color:#333131;font-weight:400;text-align:left}
.af-envio-radio input{accent-color:#EF9809;width:auto}
.af-envio-file{border:2px dashed #ccc;border-radius:6px;padding:18px;font-family:"Onest",sans-serif;transition:border-color .15s ease;text-align:left}
.af-envio-file:focus-within{border-color:#EF9809}
.af-envio-file input{width:100%;font-size:13.5px;color:#555}
.af-envio-file-hint{margin-top:8px;font-size:12.5px;color:#999}
.af-envio-checkbox{display:flex;align-items:flex-start;gap:8px;font-family:"Onest",sans-serif;font-size:13.5px;color:#555;line-height:1.5;font-weight:400;text-align:left}
.af-envio-checkbox input{margin-top:3px;accent-color:#EF9809;width:auto}
.af-envio-checkbox a{color:#AA0000}
.af-envio-boton{padding:15px 0;border:none;border-radius:6px;background:#EF9809;color:#fff!important;
	font-family:"Onest",sans-serif;font-weight:600;font-size:16px;cursor:pointer;transition:background .15s ease;margin-top:8px}
.af-envio-boton:hover{background:#d98700}
.af-envio-boton:disabled{background:#ccc;cursor:not-allowed}
.af-envio-seguridad{max-width:640px;margin:0 auto 50px;padding:0 20px;display:flex;align-items:center;gap:20px;
	background:#FFF6E0;border-radius:14px;text-align:left}
.af-envio-seguridad{padding:24px 24px}
.af-envio-seguridad-icono{width:56px;height:56px;flex-shrink:0;color:#2e7d32}
.af-envio-seguridad-texto h4{font-family:"Onest",sans-serif;font-style:italic;font-weight:700;font-size:17px;color:#333131;margin:0 0 8px}
.af-envio-seguridad-texto p{font-family:"Onest",sans-serif;font-size:13.5px;color:#666;line-height:1.6;margin:0}
@media(max-width:640px){
	.af-envio-radios{gap:8px 16px}
	.af-envio-hero h2{font-size:32px}
	.af-envio-hero h3{font-size:20px}
	.af-envio-seguridad{flex-direction:column;text-align:center}
}

/* ── Fondos de video (reemplazo liviano de GIFs de fondo) ──────────────────────
   Capa insertada por assets/af/js/af-bg-video.js sobre cualquier contenedor con
   data-af-bg-video. Queda detrás del contenido existente (primer hijo, sin
   z-index propio) igual que las fotos de fondo del builder. */
.af-bg-video-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;
	/* translateZ(0) fuerza a que la capa tenga su propia superficie de composición.
	   Sin esto el video quedaba sin pintarse hasta que algo obligaba a repintar
	   (abrir/cerrar el inspector), y entonces aparecía solo en la parte de la
	   pantalla que se invalidó. El culpable es el fondo fijo del diseño (ver la
	   regla de background-attachment más abajo), que rompe la composición del
	   <video> que tiene encima. */
	transform:translateZ(0)}
.af-bg-video-layer video{width:100%;height:100%;object-fit:cover;display:block;transform:translateZ(0)}
.af-bg-video-layer .af-bg-video-tint{position:absolute;inset:0}
/* El video REEMPLAZA la foto de fondo del bloque: sin esto la foto (que el
   builder posiciona en relative y emite después de la capa) pintaría encima del
   video y lo taparía por completo. Se anula solo la imagen, no la caja, para
   que el bloque conserve su altura y el texto no se mueva. El !important es
   necesario porque el builder pone la foto en un style="" en línea.
   También se desactiva el background-attachment:fixed que el diseño aplica a
   .parallax50-bg / .fixed-bg: ese fondo fijo ya no muestra nada (la foto está
   oculta) pero seguía forzando el camino de composición lento que dejaba el
   video sin pintar. */
[data-af-bg-video] > .stripe-background,
[data-af-bg-video] .background-image-div,
[data-af-bg-video] [data-menu-name="PREVIEW_INLINE_IMAGE"],
/* Caso "foto suelta" (una tarjeta de slider, no una sección completa): el video
   se pone en el MISMO div que ya tenía la foto de fondo (PREVIEW_INLINE_IMAGE),
   no en un contenedor por encima. El selector de arriba exige que sea un
   DESCENDIENTE de [data-af-bg-video] y por eso no alcanza a ese caso — hace
   falta también la versión "mismo elemento" (sin espacio). */
[data-af-bg-video][data-menu-name="PREVIEW_INLINE_IMAGE"]{
	background-image:none!important;
	background-attachment:scroll!important}

/* …y además hay que destapar el video: los contenedores intermedios que el builder
   pone entre el bloque y el texto traen color de fondo propio (el porta-foto es
   blanco opaco y item-content lleva el velo de color del diseño). Como van después
   de la capa del video en el HTML y cuelgan de un ancestro posicionado, se pintan
   ENCIMA de ella y la tapaban por completo: el bloque se veía blanco aunque el
   video estuviera cargado y reproduciéndose. Se vuelven transparentes solo en los
   bloques que usan video; el velo de color se controla con el tinte del panel. */
[data-af-bg-video] .preview-image-holder,
[data-af-bg-video] .inner-pic-holder,
[data-af-bg-video] .item-content,
[data-af-bg-video] .multi-container,
[data-af-bg-video] .item-preview,
[data-af-bg-video] .helper-div,
[data-af-bg-video] .gallery-wrapper,
[data-af-bg-video] .page-wrapper{background-color:transparent!important}