/* Blog — estructura de Zephyr «Blog» y «Blog Details» (referencia/medidas/blog-* y post-*, 1440 y 390 px). Prefijos: bl- (índice, archivos y búsqueda), ar- (artículo), prosa (contenido del artículo, HTML de OpenClaw). La tarjeta (.tart) y la rejilla (.blogsec__rejilla) son las del tema (sitio.css). */ /* ==================== Índice, archivos y búsqueda ==================== */ .bl-lista { padding: 60px 0 140px; } /* 60 (divisor) + 100 de la rejilla = 160 bajo el título, como Zephyr */ /* Tarjetas: recorte anclado a la izquierda para que el título de las imágenes 1200×630 de OpenClaw no quede cortado. */ .bl-rejilla .tart__img img, .ar-recientes .tart__img img { object-position: 0 50%; } .bl-paginas { margin-top: 90px; display: flex; align-items: center; justify-content: center; gap: 14px; } .bl-paginas__lista { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 8px; } .bl-paginas__num { min-width: 46px; height: 46px; padding: 0 14px; border-radius: 100px; display: inline-flex; align-items: center; justify-content: center; background: var(--crema2); color: var(--tinta); font: 500 16px/20px var(--archivo); text-decoration: none; transition: background-color .2s var(--oc), color .2s var(--oc); } .bl-paginas__num[aria-current] { background: var(--negro); color: #fff; } .bl-paginas__puntos { min-width: 22px; text-align: center; font: 500 16px/20px var(--archivo); color: var(--gris); } .bl-paginas__flecha { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--negro); color: #fff; transition: background-color .2s var(--oc), transform .15s var(--oc); } a.bl-paginas__flecha:active { transform: scale(.94); } .bl-paginas__flecha--off { background: var(--crema2); color: rgba(7, 7, 28, .28); } .bl-paginas__estado { display: none; font: 500 16px/20px var(--archivo); color: var(--tinta); } @media (hover: hover) and (pointer: fine) { .bl-paginas__num:not([aria-current]):hover { background: #e8dfc2; } a.bl-paginas__flecha:hover { background: var(--azul); } } .bl-buscar { margin-top: 28px; max-width: 460px; } .bl-buscar__etiqueta { display: block; margin-bottom: 10px; font: 500 14px/18px var(--archivo); color: var(--gris); } .bl-buscar__fila { position: relative; } .bl-buscar input[type="search"] { width: 100%; height: 56px; margin: 0; padding: 0 118px 0 18px; border: 1px solid #ccc; border-radius: 16px; background: var(--claro); color: var(--tinta); font: 400 16px/20px var(--archivo); -webkit-appearance: none; appearance: none; } .bl-buscar input[type="search"]::placeholder { color: var(--gris2); } .bl-buscar input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } .bl-buscar button { position: absolute; top: 4px; right: 4px; bottom: 4px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--negro); color: #fff; font: 500 15px/18px var(--archivo); cursor: pointer; transition: transform .15s var(--oc); } .bl-buscar button:active { transform: scale(.97); } .bl-paginas a:focus-visible, .bl-buscar input:focus-visible, .bl-buscar button:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; } .bl-vacio { max-width: 560px; } .bl-vacio__icono { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--crema2); color: var(--azul); } .bl-vacio__titulo { margin-top: 22px; font: 500 32px/38px var(--archivo); letter-spacing: -.6px; color: var(--tinta); } .bl-vacio__texto { margin-top: 12px; font: 500 16px/22px var(--switzer); color: var(--gris); } .bl-vacio .bl-buscar { margin-top: 24px; } .bl-vacio__boton { margin-top: 28px; } /* ==================== Artículo ==================== */ .ar-articulo { padding-top: 100px; } .ar-col { width: 100%; max-width: 940px; margin: 0 auto; padding: 0 20px; } /* Zephyr: container-small, 900 de contenido */ .ar-titulo { font: 500 62px/70px var(--archivo); letter-spacing: -1.5px; color: var(--tinta); text-wrap: balance; overflow-wrap: break-word; } .ar-datos { margin: 50px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; } .ar-dato { display: flex; align-items: baseline; gap: 5px; font: 500 18px/20px var(--archivo); } .ar-dato dt { color: var(--gris); } .ar-dato dd { color: var(--tinta); } .ar-dato a { text-decoration: none; } .ar-dato a:hover { text-decoration: underline; text-underline-offset: 3px; } .ar-dato a:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; } .ar-imagen { margin: 50px 0 0; border-radius: 16px; overflow: hidden; background: var(--crema2); } /* Recorte anclado a la izquierda: las imágenes nuevas de OpenClaw (1200×630) llevan el título a la izquierda. */ .ar-imagen__img { width: 100%; height: auto; aspect-ratio: 900 / 520; object-fit: cover; object-position: 0 50%; } .ar-imagen__img--natural { aspect-ratio: auto; } .ar-cuerpo { margin-top: 120px; } .ar-cabeza:not(:has(.ar-imagen)) + .ar-cuerpo { margin-top: 70px; } /* Banda de contacto (reemplaza la del tema viejo). Caja oscura del tema con el resplandor azul de las tarjetas de proceso. */ .ar-contacto { margin-top: 100px; } .ar-contacto__caja { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px 48px; padding: 56px 48px 48px; border-radius: 24px; background: var(--negro); color: var(--claro); } .ar-contacto__caja::before { content: ''; position: absolute; z-index: -1; top: -330px; right: -270px; width: 720px; height: 720px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(36, 36, 159, .9) 0%, rgba(36, 36, 159, .5) 28%, rgba(8, 8, 80, .4) 46%, rgba(5, 5, 26, 0) 68%); } .ar-contacto__titulo { margin-top: 18px; max-width: 520px; font: 500 44px/50px var(--archivo); letter-spacing: -1px; color: var(--claro); } .ar-contacto__bajada { margin-top: 18px; max-width: 470px; font: 500 16px/23px var(--switzer); letter-spacing: -.1px; color: var(--gris2); } .ar-contacto__acciones { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; } .ar-contacto .clientes { margin-top: 0; } .ar-contacto .clientes__caras img, .ar-contacto .clientes__mas { border-color: var(--negro); } .ar-contacto .clientes__mas { background: var(--azul); color: #fff; } .ar-contacto .clientes__txt p { color: var(--claro); } .ar-contacto .estrellas--16 { color: var(--cian); } .ar-contacto__botones { display: flex; flex-wrap: wrap; gap: 10px; } .ar-btn-wa { background: transparent; color: var(--claro); box-shadow: inset 0 0 0 1px rgba(247, 247, 247, .3); } .ar-btn-wa .btn__punto { background: var(--cian); } .ar-contacto__tel { font: 500 15px/20px var(--archivo); color: var(--gris2); } .ar-contacto__tel a { color: var(--claro); text-decoration: underline; text-decoration-color: rgba(247, 247, 247, .35); text-underline-offset: 3px; } .ar-contacto__tel a:hover { text-decoration-color: currentColor; } /* ==================== Contenido del artículo (.prosa) ==================== HTML real de OpenClaw: h2 con preguntas, h3/h4, párrafos, listas, tablas (casi todas), 
, figuras con
   crédito, JSON-LD, p.lw-salida-venta, aside.lw-local-commercial-link, ol.lw-sources y estilos en línea (enlaces
   #136aaf, celdas con borde gris, cajas lilas). Los estilos en línea se igualan a la marca con !important: el texto
   no cambia, solo cómo se ve. Medida de lectura: 700 px de texto; tablas y código usan los 900 de la columna. */
.prosa { color: #43414f; font: 500 18px/28px var(--switzer); letter-spacing: -.1px; overflow-wrap: break-word; }
.ar-cuerpo .prosa > * { max-width: 700px; }
.ar-cuerpo .prosa > [style*="max-width"]:not(img) { max-width: 700px !important; margin-left: 0 !important; margin-right: 0 !important; }
.ar-cuerpo .prosa > .prosa-tabla, .ar-cuerpo .prosa > pre { max-width: none; }
.prosa > :first-child { margin-top: 0 !important; }
.prosa > :last-child { margin-bottom: 0 !important; }
.prosa p, .prosa ul, .prosa ol, .prosa dl { margin: 0 0 24px; }
.prosa p:empty { display: none; }
.prosa h1, .prosa h2 { margin: 60px 0 18px; font: 500 34px/40px var(--archivo); letter-spacing: -1px; color: var(--tinta); text-wrap: balance; }
.prosa h3 { margin: 40px 0 12px; font: 600 24px/30px var(--archivo); letter-spacing: -.4px; color: var(--tinta); }
.prosa h4, .prosa h5, .prosa h6 { margin: 30px 0 10px; font: 600 19px/25px var(--archivo); letter-spacing: -.2px; color: var(--tinta); }
.prosa :is(h1, h2) + :is(h3, h4) { margin-top: 22px; }
.prosa :is(h1, h2, h3, h4, li) { scroll-margin-top: 24px; }
.prosa strong, .prosa b { font-weight: 600; color: var(--tinta); }
.prosa [style*="color"]:not(a) { color: inherit !important; }
.prosa [style*="font-family"] { font-family: inherit !important; }
.prosa a { color: var(--azul) !important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-decoration-color: rgba(8, 8, 80, .35) !important;
	text-underline-offset: 3px; overflow-wrap: anywhere; }
.prosa a:hover { text-decoration-color: currentColor !important; }
.prosa a:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; border-radius: 2px; }
.prosa .direct-answer { font-size: 19px; line-height: 29px; color: var(--tinta); }

.prosa ul, .prosa ol { padding-left: 1.35em; }
.prosa li { margin: 0 0 10px; padding-left: .25em; }
.prosa li::marker { color: var(--azul); }
.prosa ol > li::marker { font-family: var(--archivo); font-weight: 600; }
.prosa li > :is(ul, ol) { margin: 10px 0 0; }
.prosa li > p { margin: 0 0 8px; }
.prosa sup { font-size: .68em; line-height: 0; vertical-align: super; }
.prosa sup a { text-decoration: none !important; font-weight: 600; }

.prosa blockquote { margin: 34px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--azul); font: 500 21px/30px var(--archivo); letter-spacing: -.3px; color: var(--tinta); }
.prosa blockquote p:last-child { margin-bottom: 0; }
.prosa blockquote cite { display: block; margin-top: 10px; font: 500 14px/20px var(--switzer); font-style: normal; color: var(--gris); }
.prosa hr { height: 1px; margin: 48px 0; border: 0; background: rgba(7, 7, 28, .12); }

.prosa figure { margin: 34px 0; }
.prosa img { max-width: 100%; height: auto !important; border-radius: 14px !important; }
.prosa figcaption, .prosa figcaption[style] { margin-top: 10px !important; font: 500 14px/20px var(--switzer) !important; color: var(--gris) !important; text-align: left; }
.prosa .lw-credito { margin: -4px 0 26px; padding-left: 12px; border-left: 2px solid rgba(8, 8, 80, .3); font: 500 13px/19px var(--switzer); color: var(--gris); }
.prosa iframe, .prosa video { max-width: 100%; border: 0; border-radius: 14px; }

.prosa code, .prosa kbd { padding: .14em .4em; border-radius: 6px; background: var(--crema2); color: var(--tinta);
	font: 500 .86em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; overflow-wrap: anywhere; }
.prosa pre { margin: 32px 0; padding: 20px 22px; overflow-x: auto; border-radius: 14px; background: var(--negro); color: #e6e6f0;
	font: 400 14px/22px ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; white-space: pre; tab-size: 2; overflow-wrap: normal; }
.prosa pre code { padding: 0; border-radius: 0; background: none; color: inherit; font: inherit; overflow-wrap: normal; }
.prosa pre:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }

/* Tablas: el contenedor se desplaza solo (la página nunca se ensancha) y muestra una sombra en el borde que tiene más tabla. */
.prosa-tabla { margin: 34px 0; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid rgba(7, 7, 28, .1); border-radius: 14px;
	background:
		linear-gradient(90deg, #fffbef 30%, rgba(255, 251, 239, 0)) left center / 40px 100% no-repeat local,
		linear-gradient(270deg, #fffbef 30%, rgba(255, 251, 239, 0)) right center / 40px 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, rgba(7, 7, 28, .18), rgba(7, 7, 28, 0)) left center / 14px 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, rgba(7, 7, 28, .18), rgba(7, 7, 28, 0)) right center / 14px 100% no-repeat scroll,
		#fffbef; }
.prosa-tabla:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
.prosa table { width: 100% !important; margin: 0 !important; border-collapse: collapse; border-spacing: 0; font: 500 15px/22px var(--switzer); color: #43414f; }
.prosa caption { caption-side: top; padding: 16px 18px 6px; text-align: left; font: 600 15px/20px var(--archivo); color: var(--tinta); }
.prosa th, .prosa td { padding: 13px 18px !important; border: 0 !important; border-top: 1px solid rgba(7, 7, 28, .08) !important; background: none !important;
	text-align: left !important; vertical-align: top; }
.prosa thead :is(th, td), .prosa table:not(:has(thead)) tr:first-child > th { border-top: 0 !important; background: var(--crema2) !important; color: var(--tinta);
	font: 600 14px/19px var(--archivo); letter-spacing: -.1px; }
.prosa tbody th { color: var(--tinta); font-weight: 600; }
.prosa table:not(:has(thead)) > tbody > tr:first-child > * { border-top: 0 !important; }

/* Cajas de los artículos: avisos de servicio, grupos con borde y el índice en